[React] JSX 기본 문법, 스타일

1. JSX 기본 문법

※ JSX는 HTML 비슷지만, Javascript로 변환이 된다.

1) 태그

태그는 반드시 닫혀있어야 한다.

2) 엘리먼트

두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸져 있어야 한다. 단, Fragment를 사용할 경우, 불필요한 엘리먼트를 사용하지 않아도 된다.

import React, { Component, Fragment } from "react";

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>Hello</div>
        <div>Bye</div>
      </Fragment>
      // <div>
      //   <div>Hello</div>
      //   <div>Bye</div>
      // </div>
    );
  }
}

export default App;

3) JSX Javascript 값 사용

JSX 내부에서는 Javascript 값을 사용할 땐 '{ }'을 사용한다.

import React, { Component, Fragment } from "react";

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div> Hello { name }!</div>
    );
  }
}

export default App;

4) var, const, let

var, const/let의 차이는 scope의 차이이다. var는 더이상 사용하지 않고, const는 한번 선언 후 고정정인 값, let은 유동적인 값을 사용할 때 적용한다.

5) 조건부 렌더링

조건부는 삼항 연산자를 사용한다.

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 3
          ? '맞다' : '틀리다'
        }
        </div>
    );
  }
}

export default App;

import React, { Component } from "react";

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return <div>1이다.</div>
            if (value === 2) return <div>2이다.</div>
            if (value === 3) return <div>3이다.</div>
            return <div>없다.</div>
          })()
        }
        </div>
    );
  }
}

export default App;

import React, { Component } from "react";

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (() => { // Arrow Function
            if (value === 1) return <div>1이다.</div>
            if (value === 2) return <div>2이다.</div>
            if (value === 3) return <div>3이다.</div>
            return <div>없다.</div>
          })()
        }
        </div>
    );
  }
}

export default App;

 

 

 

2. JSX 스타일

React는 객체 형태로 스타일을 사용한다.

import React, { Component } from "react";

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '36px'
    };
    return (
      <div style={style}>안녕하세요!</div>
    );
  }
}

export default App;

클래스 형태로 스타일을 가져올 경우에는 다음과 같다.

.App {
  font-family: sans-serif;
  text-align: center;
}

import React, { Component } from "react";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className='App'>안녕하세요!</div>
    );
  }
}

export default App;