React - 조건부(삼항) 연산자

JSX 내부 자바스크립트 표현식에는 if문을 사용할 수 없다. JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { }안에 조건부 연산자를 사용하면 된다.
(조건부 연산자는 삼항 연산자라고도 불린다.)

function App() {
  const name = '리액튼';

  return (
    <>
      {name === '리액트' ? (
        <h1>리액트입니다</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </>
  );
}

export default App;

name = '리액트'일 경우 '리액트입니다'가 출력되지만
그게 아닐 경우(지금의 코드)는 '리액트가 아닙니다'가 출력된다.

function App() {
  const name = '리액튼';

  return (
    <>
      {name === '리액트' ? ( 
      <h1>리액트입니다</h1> ) : null }
    </>
  );
}

export default App;

조건을 만족할 때만 보여주고, 그렇지 않으면 렌더링하지 않을 때는 null을 렌더링한다. 하지만 이것보다 더 짧은 코드를 사용할 수 있다.

function App() {
  const name = '리액튼';

  return (
    <>
      {name === '리액트' && <h1>리액트입니다</h1> }
    </>
  );
}

export default App;

위처럼 && 연산자를 사용하여 조건부 렌더링을 할 수 있다. && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
한가지 주의할 점은 falsy한 값인 0은 예외적으로 화면에 나타난다.

function App() {
  const number = 0;

  return (
    <>
      {number && <div>내용</div> }
    </>
  );
}

export default App;

이 코드는 화면에 숫자 0을 보여준다.