회사에서 진행중인 프로젝트에 React Query를 도입하기 위해 선임 개발자님께서 한 article을 보내주셨다. (이에 대한 내용은 다음 글에 다루기로)
그런데 그 article을 보다 눈에 들어온 다른 article의 제목...
Stop Using "&&" for Conditional Rendering in React
조건부 렌더링으로 &&을 자주 쓰고 있던 나는 왜 사용하지 말라는 것인지, 그럼 무엇을 사용하는게 좋은지 너무 궁금해서 참을 수 없어졌다!
"&&"을 리액트에서 사용하는 일반적 방법은 이러하다.
function MyComponent({ condition }) {
return (
<div>
<h1>Title</h1>
{condition && <ConditionalComponent />}
</div>
);
}
condition
이 truthy 값이라면, <ConditionalComponent />
가 렌더링된다.condition
이 falsy 값이라면, <ConditionalComponent />
가 렌더링되지 않는다.왜 그런가?
이는 리액트에만 국한된 것이 아닌, 논리 연산자 혹은 단락회로 평가 (단락평가, 단축평가) 라고 불리는 자바스크립트 및 기타 프로그래밍 언어의 동작이다. 즉, 첫 번째 피연산자(조건)이 거짓이면 AND 연산자(&&
)가 중지되고 두번째 피연산자(<ConditionalComponent/>
)를 평가하지 않는다.
"&&"의 짧은 구문은 자주 선호되며 작동한다. 하지만, 사용할 수 있다고 해서 사용해야 하는 것은 아니다.
위의 경우에서 condition
이 true
또는 false
값이라면 <Conditional Component />
가 렌더링되거나 되지 않는, 예상된 결과를 얻는다.
하지만, 만약 conditon
이 boolean
값이 아니라면 문제가 발생할 수 있다.
예를 들어
conditon
이 0
이라면 UI에 0
이 표시된다.conditon
이 undefined
라면 이러한 에러가 표시될 것이다.UI에 원치 않는 것을 표시하지 않으려면 자바스크립트 삼항 연산자를 사용하라.
condition ? <ConditionalComponent /> : null;
피할 수 있는 UI 버그를 방지하려면 리액트 구성 요소의 조건부 렌더링에 논리 연산자(&&
or||
) 대신 삼항 연산자를 사용하라. 간단하지만 깨지지 않는 마법이다🧙♂️.
🔴 BAD
condition && <ConditionalComponent />
🟢 GOOD
condition ? <ConditionalComponent /> : null
조건에 !!
또는 Boolean(condtion)
을 사용하여 조건을 boolean
타입으로 강제하면 되지 않는가?
필요치 않은 null
값과 else
를 굳이 사용해야 하는가?
라는 의문이 생겼으나, 이미 댓글에서 이에 대한 질문과 답변이 오가는 것을 발견했다.
작성자 Jakub Kozak 의 답변들
요점은 삼항 연산자를 사용함으로 조건을
boolean
으로 변환하는 것을 잊어 UI에 0을 표시하는 것을 방지할 수 있다는 것입니다.
propTypes 또는 TS에서
condition
이boolean
타입이라고 해도condition
을boolean
으로 강제하시겠습니까?condition
은 props나 API에서 올 때 예상과 다른 타입일 수 있습니다.
조건을
boolean
으로 강제하는 것도 괜찮습니다만, 사람의 실수를 줄이기 위해 공통적으로 삼항 연산자를 사용하면 걱정할 것이 없습니다.
API를 가져올 때 예상할 수 없는 값..? 유효성 검사를 거치면 될 것이고...
TS를 사용한다면 타입을 정의하고 사용할테니... 흠...
나와 같은 의문을 갖는 사람이 많은지 댓글 대부분은 &&
을 쓰는 것이 더 가독성이 좋으며 타입에 대한 문제는 다른 방법으로 해결할 수 있다고 한다. (TS라든지, 유효성 검사라든지, undefined
도 falsy
값이므로 결과는 같다든지, )
작성자는 이에 대해 '사람이기에 할 수 있는 실수를 줄이자' 는 의미의 답을 하지만 다들 납득하지 않는 분위기이다. (가독성을 떨어트린다며)
나의 미비한 지식으로는 사람의 실수도 줄이고 가독성도 좋은 Boolean(condition)
을 사용하는 것이 낫지 않겠나 싶다.
프로젝트를 팀 단위로 진행한다면 삼항 연산자든 논리 연산자든 한가지 방법으로 통일하여 생길 수 있는 실수를 줄이는 것이 가장 좋아 보인다.
이 글은 Jakub Kozak 이 작성한 Stop Using "&&" for Conditional Rendering in React article과 댓글을 해석, 참고하였습니다.