[ 리액트(React) ] && 대신 삼항연산자 사용하기

📍 && 대신 삼항연산자 사용하기

리액트로 렌더링 view를 그릴 때 종종 && 연산자를 이용해 조건부 렌더링을 할 때가 있을 것이다. 

 

여담으로 &&연산자는 Logical AND, 단축평가(short circuit evaluation)라고 하며, 일반적으로 왼쪽에서 오른쪽으로 피연산자를 평가하여 처음 만나는 연산자가 falsy인 경우 false를 반환하고, 모든 연산자가 truthy 한 경우 마지막 연산자를 반환하는 개념이다. falsy는 Boolean context로 변경될 때 false로 평가되는 값으로 JS에서는 false, 0, -0, "", null, undefined, NaN가 있다. truthy는 falsy와 반대로 Boolean context로 변경될 때 true로 평가되는 값으로 JS에서 falsy값을 제외하면 모두 참이다. 예를 들면 true, {}, [], 123, "0", "false", 3.14, -3.14, Infinity 등등이 있다.

728x90

다시 본론으로 돌아와 하단의 App 컴포넌트는 안녕하세요!를 리턴한다.

 

 

그런데, condition이 boolean으로 추정되지 않거나 undefined일 경우 react가 다음 에러를 뿜을 수 있다.

 

 

코드는 약간 길어질 수 있지만, 결론적으로 잠재적인 버그를 예방하기 위해 && 대신 삼항연산자를 사용하는 이유가 바로 이것이다.

// AS-IS
isCondition && <Hello />

// TO-BE
isCondition ? <Hello /> : null

 

Reference

1. Logical AND - MDN
2. Falsy - MDN
3. Truthy - MDN