리액트 조건부 연산자(삼항 연산자) 사용하기

결론부터 얘기하자면 리액트에서는 if문 대신 조건부 연산자를 사용한다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 중괄호 { } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자의 다른 이름은 삼항연산자다.

const name = '리액트';

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

이런식으로 { } 중괄호 안에 객체별로 ( ) 소괄호로 삼항연산자를 나타낸다.

[조건식 ? 맞으면 이거 : 틀리면 이거]

코드 작성 후 저장하면 리액트입니다 라는 문구를 볼 수 있다. 하지만 name값을 다르게 바꾸면 '리액트가 아닙니다' 라는 문구가 뜬다.

AND 연산자 (&&)를 사용한 조건부 렌더링

개발하다 보면 특정 조건을 만족할 때 내용을 보여주고, 아닌 경우 아무것도 렌더링 하지 않아야 하는 상황이 올 수 있는데 이럴 때도 조건부 연산자를 통해 구현한다.

const name = '뤡트';

return(
 <div>
   {name === '리액트' ? <div>리액트</div> : null }
 </div>
)

이렇게 null 값을 넣어주면, 아무것도 렌더링되지 않는다. && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다. 여기서 한 가지 주의해야 할 점이 있는데 falsy한 값이 0은 예외적으로 화면에 나타난다는 것이다.

undefined를 렌더링하지 않기

어떤 값이 undefined일 수도 있다면 OR( | | )연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

function APP() {
  const name = undefined;
  return name || "값이 undefined입니다."
}