<> vs null vs undefined
JSX의 return <></> vs return null vs return undefined
1. return <></>
JSX는 하나의 태그만을 반환하기 때문에 여러 엘리먼트를 그룹화할 때 사용한다.
1
2
3
4
5
6
7
8
const App = () => {
return (
<>
<div>여러 엘리먼트를 묶을 때</div>
<div>Fragment를 사용함!</div>
</>
);
};
Fragment는 빈 태그이기 때문에, 실제로 렌더링을 하면 Fragment는 사라지고 Fragment 내부 요소들만 남게 된다. 이러한 특성때문에 레이아웃이나 스타일에 영향을 주지 않는다.
1
2
3
<!-- 실제로 렌더링되면 남는 엘리먼트 -->
<div>여러 엘리먼트를 묶을 때</div>
<div>Fragment를 사용함!</div>
하지만 Fragment도 빈 “태그”이기 때문에 실제로는 렌더링이 일어난다.
user가 로그인했을 경우에만 <HelloWorld />컴포넌트를 보여주고, 아닐 경우에는 Fragment를 반환하도록 코드를 작성했을 때, 다음과 같은 코드를 작성해보자.
- user가 로그인했을 경우
<HelloWorld />가 렌더링 되어 화면에 보여짐
- 로그인하지 않았을 경우
- 화면에는 아무것도 비춰지지 않음
하지만 Fragement는 화면에는 비춰지지 않지만 렌더링이 일어난다. 즉, 불필요한 렌더링이 일어난다.
단순히 특정 화면에 아무것도 출력하지 않기 위해 <></>만 반환하는 것을 무분별하게 사용하지 않아야한다.
1
2
3
{
isLogin ? <HelloWorld /> : <></>;
}
2. return null
null은 개발자가 의도적으로 값이 없음을 초기화할 때 사용한다.
아무것도 반환하고 싶지 않을 때에 return null을 사용하면 렌더링하지 않을 수 있다.
예시1
아이템의 개수가 1개 이상이면 <ListContainer />을 렌더링, 아이템의 개수가 0이라면 아무것도 반환하지 않음
1
2
3
4
const ListContainer = ({ items }) => {
if (items.length === 0) return null;
return <ul>나는야 리스트 컴포넌트</ul>;
};
예시2
아이템의 개수가 1개 이상이면 <ItemContainer />을 렌더링, 아이템의 개수가 0이라면 아무것도 반환하지 않음
1
2
3
{
items.length !== 0 ? <ItemContainer /> : null;
}
3. return undefined
null처럼 아무것도 렌더링되지 않는다. 하지만 리액트 공식문서에 따르면 조건부로 아무것도 반환하지 않을 때는 null을 반환할 것을 권장한다.
리액트 18이전에는 런타임에 오류가 발생됐지만, 리액트 18부터는 렌더링은 허용함
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
렌더링에서 아무것도 반환되지 않았습니다. 이는 일반적으로 return 문이 누락되었음을 의미합니다. 또는 아무것도 렌더링하지 않으려면 null을 반환합니다.
4. return false
null과 마찬가지로 아무것도 반환하지 않는다.
하지만 null과는 달리 false는 나중에 구성요소가 변해도 업데이트되지 않는다. React가 false구성 요소를 “마운트 해제”하라는 신호로 해석해 구성요소를 DOM에서 완전히 제거한다.
5. &&연산자
논리연산자 &&를 사용하면 조건이 true일 경우에만 JSX를 렌더링 시킬 수 있다. 조건이 false인 경우에는 아무것도 반환하지 않고 아무것도 렌더링하지 않는다.
1
2
if (조건 === true) render();
else return null;
1
2
3
4
5
return (
<li className="item">
{name} {isPacked && "✔"}
</li>
);
참고 사이트