더북(TheBook)

2.4.4 &&를 사용한 조건부 렌더링

 

특정 조건을 만족할 때와 만족하지 않을 때, 다른 결과를 보여 주어야 할 때는 2.4.3절처럼 삼항 연산자를 쓰는 것이 맞습니다. 하지만 단순히 특정 조건을 만족할 때는 보여 주고, 만족하지 않을 때는 보여 주고 싶지 않다면 다음과 같이 코드를 입력하겠죠?

{ condition ? ‘보여주세요’ : null }

 

JSX에서는 null 값 외에도 false 값을 렌더링하면 아무것도 나타나지 않습니다. 따라서 이때는 삼항 연산자를 쓰는 대신 다음과 같이 && 연산자로 조건부 렌더링을 할 수 있습니다.

{ condition && ‘보여주세요’ }
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.