[React] null vs empty fragment

리액트에서는 종종 다른 조건에 따라 아무것도 렌더링 하지 않고 싶을 때가 있다. 그럴 때 쓰는 반환값이 바로 null과 empty fragment( <></> )이다. 이 둘 중에 무엇을 쓰는 게 더 나은 선택일까?

function Item({ name, isPacked }) {
  if (isPacked) {
    return null; // 또는 <></>
  }
  return <li className='item'>{name}</li>;
}

null을 사용하는 것이 리액트 렌더링 프로세스에 아무 영향을 끼치지 않기 때문에 성능상으로 좋아서 사용하는 개발자가 있고, "빈 엘리먼트를 반환한다"라는 개념에서 <></>를 의미론적으로 사용하는 개발자도 있다.

 

이 문제에 대한 힌트가 담긴 내용이 공식 문서에도 나와있다. 역시 이럴 땐 공식 문서 먼저 살펴보는 것이 좋은 것 같다. 공식 문서에서는 '아무것도 렌더링 하지 않을 때' null을 사용하는 것을 예시로 들고 있다. 하지만 렌더링을 하려는 것에 null을 반환하는 게 개발자에게 익숙하게 보이지 않을 수 있기 때문에, 다른 방향으로 렌더링 할 수 있는 방법도 소개하고 있다.

 

개인적인 생각으로 내린 결론은 아무것도 렌더링 하지 않을 때는 null을 사용하고, 엘리먼트를 그룹화 할 때 fragment( <>...</> )를 사용하는 것이 좀 더 역할에 맞는 것 같다.

참고

Conditional Rendering - React
Null vs Empty fragment? - Reddit
Are you giving the proper sense to React.Fragment? - Dev
React Fragment vs Null - junghyeonsu