조건부 렌더링 꿀팁

리액트에서는 if문을 사용하는 대신 논리 연산자와 삼항 연산자를 이용한다.

 

AND 연산자

 

{show && <p> 보인다 </p>}

 

위의 경우 show가 true일 때만 p태그가 보인다.

 

{show || <p> 보인다 </p>}

 

show가 false일때만 렌더링 한다.

 

삼항연산자

{toggle ? <p>✅</p> : <p>❎</p>}

 

const nullValue = null; const undefinedValue = undefined; const trueValue = true; const falseValue = false; const emptyString = ''; const emptyArray = [];

 

위의 값들은 렌더링이 되지 않는다.