개요

---

JSX(혹은 TSX)는빈 태그(Fragment), Null , undefined모두 반환할 수 있다. 셋의 공통점은 페이지에는 보이지 않는다는 것이다. 화면에 보이지 않으니, 아무거나 갖다 써도 상관없지 않을까? 라는 생각에서 비롯된 이번 포스트는 세 가지를 반환했을 때 어떠한 차이점이 있고 만약 빈 데이터를 반환하고 싶다면 어떤 방법을 선택해야 최적화 된 혹은 섹시한 코드를 작성할 수 있는지 알아보도록 하겠다.

{data ? <div>{data}</div> : <></>};
{data ? <div>{data}</div> : null};
{data ? <div>{data}</div> : undefined};
// 어떤것을 써야할까?

< > < / >

---

Wrap elements in to group them together in situations where you need a single element. Grouping elements in Fragment has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag <></> is shorthand for in most cases.

단일 엘리먼트가 필요한 상황에서 엘리먼트들을 로 묶어 함께 그룹화합니다. 로 엘리먼트들을 그룹화하더라도 실제 DOM에는 아무런 영향을 주지 않으며, 그룹화하지 않은 것과 동일합니다. 빈 JSX 태그 <></>는 대부분의 의 축약 표현입니다.
https://react-ko.dev/reference/react/Fragment#returning-multiple-elements

  function App() {
  return (
    <>
  		<div></div>
      	<div></div>
    </>
  );
}

JSX는 항상 한가지의 태그만 return한다. 즉, 두 div를 나란히 return 할 수 없다는 말이다. 이는 자바스크립트의 함수가 한 가지만 return한다는 것을 생각하면 바로 이해할 수 있다. 따라서 나란한 두가지의 요소를 return하고 싶다면 Fragment를 사용해서 return하면 된다.

Fragment는 특이한 점이 있는데, 빈 태그라는 점이다. 실제로 렌더링을 하면 빈 태그는 사라지고 나란한 요소만 남게된다. 이러한 특성은 레이아웃을 건드리지 않기 때문에 스타일링에 유용하다

하지만 화면에만 보이지 않을뿐 실제로는 렌더링 과정을 거치게 된다.
그 이유는 Fragment는 리액트에서 제공하는 특별한 요소이기 때문이다. 요소는 기본적으로 렌더링이 된다 하지만 리액트에서 Fragment를 화면에 비치지 않을 뿐이다. 좀 더 쉽게 생각하면 Fragment를 명시적으로 사용하면 된다.

  function App() {
  return (
    <React.Fragment>
  		<div></div>
      	<div></div>
    </React.Fragment>
  );
}

우리는 현재 최적화 작업 즉, 불필요한 렌더링을 없애는 작업을 하고 있다. 그렇다면 Fragment를 반환하는것은 아닌것은 확실해졌다.

null, undefined

자바스크립트 기초 공부중에 많이 보았던 예시인데, 해당 예시와 맞물려서 null과 undefined를 생각해보면 답을 금방 찾을 수있다.

null은 값이 없는 상태로 개발자가 명시해서 값을 초기화할때 사용한다.
undefind는 변수를 선언해서 초기화하는 후에 할당하지 않았을때와 함수의 기본 return값, 혹은 객체의 없는 프로퍼티를 참조할 때, 배열의 없는 인덱스를 참조할 때 undefind가 반환된다.

이렇게 보니 null을 써야 할 것 같은 느낌이 들지 않는가? 물론, null과 undefind는 성능적으로 차이가 없다. 하지만, 작은 것부터 습관을 들이고 컨벤션을 지켜나가야 기초가 잘 쌓이지 않겠는가? 없는값을 만들고 싶다면 null을 습관화 하자

결론

{data ? <div>{data}</div> : <></>}; // 최악
{data ? <div>{data}</div> : null}; // 정답
{data ? <div>{data}</div> : undefined}; // 우리보다 똑똑한 사람들이 만든 컨벤션은 지키자