조건부 렌더링

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 개념이 없는 익명 함수이다.