[React] 다른 방식으로 조건부 렌더링을 하는 컴포넌트는 동일할까?

조건부 렌더링

조건부 렌더링을 하는 방식은 여러가지가 있을 수 있다.

<pre>if</pre>를 사용하는 방법, <pre>&&</pre>를 사용하는 방법, 삼항연산자를 사용하는 방법 등 말이다.

 

질문

다른 방식으로 조건부 렌더링을 하는 컴포넌트는 "완전히 동일"할까?

 

예를 들어, 아래 컴포넌트 2개가 있다고 하자.

아래 두 컴포넌트는 동일한걸까?

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

 

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

 

정답

정답은 "동일하다" 이다.

JSX 엘리먼트 내부는 상태를 보유하지 않고 실제 DOM 노드가 아니기 때문에 동일하다고 볼 수 있다.

 

만약 내부적으로 상태를 갖고 있었다면 (각기 다른 상태를 가질 수 있기 때문에) 다르다고 볼 수 있을 것이다.

 

---

참고

리엑트 공식문서 - 조건부 렌더링 : https://ko.react.dev/learn/conditional-rendering#conditionally-including-jsx

조건부 렌더링 – React