&&
연산자의 동작 ⇒ 왼쪽 조건이truthy
일 때만 오른쪽 표현식을 평가. 하지만 왼쪽 조건이falsy
일 경우, React는 그 값을 그대로 반환
{false && <div>내용</div>} // 아무것도 렌더링되지 않음 {0 && <div>내용</div>} // 0이 렌더링됨
- 삼항 연산자의 동작
조건이 참이면 왼쪽 항이 렌더링되고, 거짓이면
null
이 반환되어 아무것도 렌더링되지 않음⇒ 스타일이나 레이아웃에 영향을 주는 요소가 없음
{condition ? <TrueComponent /> : null}
따라서 && 사용 시, React는 빈 값(
false
)나 다른 falsy 값을 그대로 반환할 수 있으며, 이는 스타일이나 레이아웃에 영향을 줄 수 있음따라서, 삼항 연산자를 쓰는게 좋긴 함ㅇㅇ