JSX 조건부 렌더링

JSX 내부의 자바스크립트에서 if 문을 사용할 수가 없다. 하지만 조건에 따라 다른 내용을 렌더링 해야 하는 경우에는 JSX 밖에서 if 문을 사용해 사전에 값을 설정하거나,  조건부 연산자를 사용하면 된다.

 

조건부 연산자

function App () {
  const check = '체크';

  return (
    <div>
      {check === '체크' ? (
        <h2>체크남방 입니다</h2>
      ) : (
        <h2>체크남방 아닙니다</h2>
      )}
    </div>
    )
}

 

이렇게 삼항 연산자를 이용하여 코드를 작성하면 브라우저에서 아래와 같은 문구를 볼 수 있다.

 

하지만 check 값을 변경하면, 브라우저에 나타나는 문구가 변경된다.

const check = '제크'

 

개발을 하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때는 아예 아무것도 렌더링하지 않아야 하는 경우가 있을 수 있다. 이럴 때도 조건부 연산자를 사용하면 된다.

function App() {
  const check = '제크';

  return <div>{check === '체크' ? <h2>체크남방 입니다</h2> : null}</div>;
}

 

&& 연산자를 사용해 위에 코드보다 짧은 코드로 작업을 할 수 있다.

function App() {
  const check = '제크';

  return <div>{check === '체크' && <h2>체크남방 입니다</h2>}</div>;
}

 

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false가 렌더링 될 때는 null과 같이 아무것도 나타나지 않기 때문이다.