[React]JSX, style, class, 조건부 렌더링

JSX는 리액트 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜줌.

XML 형태의 코드를 자바스크립트로 변환해야 하기 때문에, JSX를 제대로 사용하기 위해 몇가지 규칙을 준수해야 한다.

import React, { Component } from 'react';

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

export default App;

- 태그는 반드시 닫혀있어야 함. input, br, div 모두 태그를 닫아야 오류가 발생하지 않음.

- 두개 이상의 엘리멘트는 무조건 하나의 엘리멘트로 감싸져 있어야 함. 간단한 방법으로는 div를 이용하여 감싸주는 방법이 있으나, 스타일 설정이나 table 관련 태그를 작성할 때 문제가 생기거나 번거로워질 수도 있음.

그럴 때 <Fragment> </Fragment>로 감싸주면 해결 (v16.2 이상)

- JSX 내부에서 자바스크립트 값 사용

JSX 내부에서 자바스크립트 값을 사용할 땐 아래코드와 같이 사용 가능.

import React, { Component } from 'react';

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

export default App;

 

여기서 const, var, let을 이용하여 변수명을 지정하는데,  ES6에서는 var를 않쓰기로 함.

값을 선언 후 바꿔야 할 땐 let, 바꾸지 않을 땐const를 사용하면 됨(이전 포스팅에 각각 비교해둠)

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항연산자를 사용하거나, AND 연산자를 사용함.

if문은 사용할 수 없음( 사용하려면 IIFE(즉시 실행 함수 표현)을 사용해야 함)

아래의 예제를 보자.

-삼항연산자

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;

위의 1 + 1 === 2 를 1 + 1 === 3으로 바꾸면 틀려요가 나타남.

다음 예제 AND 연산자를 보자.

삼항연산자의 경우 true일 때, false일 때 다른것들을 보여줄 때 사용하는 반면, AND 연산자의 경우 단순히 우리의 조건이 true일 때만 보여주고 false일 경우 아무것도 보여주지 않을 때 사용.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;

 

대부분의 상황은 위의 방식으로 해결 할 수 있지만, 가끔씩 복잡한 조건을 작성해야 할 때도 있다. 

조건들이 복잡할 때에는 JSX 밖에서 로직을 작성하는 것이 좋고, 꼭 JSX 내부에서 해야 한다면 아래의 코드처럼 IIFE(즉시 실행함수)를 사용한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

 

또한 if문 대신 switch문을 사용해도 됨. 위의  코드는 아래와 같이 화살표 함수로 변경할 수 있다.

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

화살표 함수는 this, arguments, super 개념이 없는 익명함수

style과 className

JSX에서 style과 CSS 클래스를 설정 할 때, html 에서 하는 것과 다름.

아래는 style의 예시코드

import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };

    return (
      <div style={style}>
        hi there
      </div>
    );
  }
}

export default App;

html에서는 그냥 텍스트 형태로 아래와 같이 작성했었지만 리액트에서는 객체 형태로 작성해 줘야 함.(객체는 이전 JS포스팅에서 다루었음) 여기서 객체는 파이썬의 딕셔너리와 같이 KEY: value 쌍 형태의 배열의 묶음 이라고 볼 수 있다.

="backgroundColor: black; padding: 16px; ..."

또, 클래스를 설정할 때에는 html에서 <div class="hello">와 같이 작성 했었으나, 리액트 컴포넌트에서는 class 대신 className을 사용한다. 아래는 객체형태의 스타일과 className을 이용한 클래스 설정의 예시코드

- 객체형 스타일

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

 

- className을 이용한 클래스 설정

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

class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}

export default App;

 

주석작성

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {/* 주석은 이렇게 */}
        <h1
          // 태그 사이에
        >리액트</h1>
      </div>
    );
  }
}

export default App;

위의 코드와 같이 {/* */} 혹은 태그 사이에 사용.

 

-출처 - 벨로퍼트님 블로그