&& 연산자 vs 삼항연산자

Study Date

Dec 28, 2024 08:43 PM

Status

Done

Tags

&& 연산자의 동작 ⇒ 왼쪽 조건이 truthy일 때만 오른쪽 표현식을 평가. 하지만 왼쪽 조건이 falsy일 경우, React는 그 값을 그대로 반환

조건이 참이면 왼쪽 항이 렌더링되고, 거짓이면 null이 반환되어 아무것도 렌더링되지 않음

⇒ 스타일이나 레이아웃에 영향을 주는 요소가 없음

따라서 && 사용 시, React는 빈 값(false)나 다른 falsy 값을 그대로 반환할 수 있으며, 이는 스타일이나 레이아웃에 영향을 줄 수 있음

따라서, 삼항 연산자를 쓰는게 좋긴 함ㅇㅇ


{false && <div>내용</div>} // 아무것도 렌더링되지 않음
{0 && <div>내용</div>} // 0이 렌더링됨


{condition ? <TrueComponent /> : null}