Fragment vs Null

function DummyFunc({isA}) {
  if (!isA) {
    return <></>; // or null
  }

  return <p>Hi I am A</p>;
}

 

React에서는 아무 것도 렌더링하지 않으려 할 때 이렇게 fragment(<></>)나 null을 반환합니다.

이번 글에서는 이런 상황에서의 fragment와 null에 차이를 알아보겠습니다.

---

Fragment <></>

fragment는 DOM 구조에 어떠한 영향도 주지 않는 DOM 요소를 생성하지 않는 컴포넌트입니다.

이런 fragment는 태그는 최상위 태그로 감싸줘야 하는 React에서 요소들을 그룹화 할 때 사용합니다.

function DummyFunc() {
  return (
    <>
      <p>Hello</p>
      <h1>?</h1>
    </>
  );
}

---

Null

null을 반환하게 되면 아무것도 반환되지 않기에 렌더링 과정이 생략됩니다.

이런 null은 조건부 랜더링에서 유용하게 사용됩니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <UserGreeting />;
  }

  return <GuestGreeting />;
}

 

---

정리하기

그렇다면 둘 중 무엇을 사용해야 할까요?

실제로도 많은 사람들이 이 주제에 대해 다양한 의견을 내어놓았는데요.

 

null을 사용하는 것이 렌더링 과정이 생략되기 때문에 성능상으로 좋아서 사용하는 사람이 있었고, "빈 엘리먼트를 반환한다"라는 의미를 강조하기 위해 fragment를 사용하는 사람이 있었습니다.

 

그렇다면 공식문서는 어떨까요?

 

공식문서에는 아무것도 렌더링 하지 않을 때 null을 사용하는 것을 추구하지만 렌더링을 하려는 것에 null을 반환하면 코드를 읽을 때 별로 익숙하지 않을 수 있다고도 하였습니다.

 

제가 내린 결론은 '요소를 그룹화 할 때는 fragment를, 정말 아무것도 렌더링 하고 싶지 않을 때는 null을 사용하는 것이 좀 더 본분에 맞다' 입니다.

 

위의 결론은 단순한 저의 생각이며 글을 읽으셨다면 앞으로 더 편한 방법을 사용하시면 되겠습니다.