발단

---

회사에서 진행중인 프로젝트에 React Query를 도입하기 위해 선임 개발자님께서 한 article을 보내주셨다. (이에 대한 내용은 다음 글에 다루기로)

그런데 그 article을 보다 눈에 들어온 다른 article의 제목...

Stop Using "&&" for Conditional Rendering in React

조건부 렌더링으로 &&을 자주 쓰고 있던 나는 왜 사용하지 말라는 것인지, 그럼 무엇을 사용하는게 좋은지 너무 궁금해서 참을 수 없어졌다!

Article

---

1. "&& 은 어떻게 동작하는가

"&&"을 리액트에서 사용하는 일반적 방법은 이러하다.

function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}

• condition이 truthy 값이라면, <ConditionalComponent />가 렌더링된다.
• condition이 falsy 값이라면, <ConditionalComponent />가 렌더링되지 않는다.

왜 그런가?
이는 리액트에만 국한된 것이 아닌, 논리 연산자 혹은 단락회로 평가 (단락평가, 단축평가) 라고 불리는 자바스크립트 및 기타 프로그래밍 언어의 동작이다. 즉, 첫 번째 피연산자(조건)이 거짓이면 AND 연산자(&&)가 중지되고 두번째 피연산자(<ConditionalComponent/>)를 평가하지 않는다.

2. 왜 "&&"을 사용하면 안되는가

"&&"의 짧은 구문은 자주 선호되며 작동한다. 하지만, 사용할 수 있다고 해서 사용해야 하는 것은 아니다.

위의 경우에서 condition이 true 또는 false 값이라면 <Conditional Component />가 렌더링되거나 되지 않는, 예상된 결과를 얻는다.
하지만, 만약 conditon이 boolean 값이 아니라면 문제가 발생할 수 있다.

예를 들어

• 만약 conditon이 0이라면 UI에 0이 표시된다.
• 만약 conditon이 undefined라면 이러한 에러가 표시될 것이다.
  "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
  "렌더링 될 반환 값이 없습니다. 이것은 보통 반환 문이 누락되었음을 의미합니다. 아무것도 렌더링하지 않으려면 null을 반환하세요."

3. "&&" 대신 무엇을 사용해야 하는가

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과 댓글을 해석, 참고하였습니다.