Understanding "return null" vs "return false" in React

많은 사람들이 null을 리턴하는 것과 false를 리턴하는 것이 같다고 생각한다. 그들은 매우 비슷하지만, React가 동작하는 방법과 관련하여 몇 가지 차이점이 존재한다.

React로 개발을 할때, 특정 조건에 따라 다른 컴포넌트를 보여주기 위한 조건부 렌더링을 흔히 사용한다. 이러한 경우, 컴포넌트가 렌더되지 않아야함을 명확하게 나타나길 원할 것이다. 여기서 null과 false가 사용된다. 둘 다 컴포넌트가 렌더링되는 것을 막지만, 그들 사이에 차이점이 있다.

Returning null

컴포넌트가 null을 리턴할때, React에게 그 컴포넌트의 어느것도 DOM에서 렌더하지 말라고 말하는 것이다. 이것은 상태를 충족하지 않았을때 어느것도 렌더링하지 않길 원하거나 특정 상태에 따라 컴포넌트를 조건부로 렌더링하길 원할 때 유용할 수 있다.

const Greeting = (props) => {
  if (!props.name) {
    return null;
  }

  return <h1>Hello, {props.name}!</h1>;
};

만약 name prop이 제공되지 않았다면, 컴포넌트는 null을 리턴하고 h1 태그가 렌더링되는 것을 막을 것이다. 만약 제공된다면, h1 태그는 렌더링된다.

Returning false

컴포넌트가 false를 리턴할때, null과 같이 컴포넌트를 DOM의 어디에도 렌더링하지 말라고 말한다. 그러나, 중요한 차이점이 있다. false 리턴은 컴포넌트가 미래에 업데이트되는 것을 막는다. 이것은 React가 false를 전체 DOM으로부터 제거하라는 의미인 컴포넌트 언마운트의 신호로 해석하기 때문이다.

const Button = (props) => {
  if (!props.onClick) {
    return false;
  }

  return <button onClick={props.onClick}>Click me</button>;
};

onClick prop이 제공되지 않는다면, 컴포넌트는 false를 리턴하고, button 태그가 렌더링되는 것을 막을 것이다. 만약 제공된다면, 특정 클릭 핸들러를 가진 button이 렌더될 것이다.

false 리턴하는 것은 업데이트가 되어야할때도 업데이트를 막는 것과 같은 의도치 않은 결과를 가져올 수 있기 때문에 중요하다. 이런 이유로, 미래 업데이트에 영향을 주고 싶지 않을 때는 null을 사용해야 더 안전하다.

컴포넌트의 렌더 방법으로 false를 리턴하는 것은 상태 업데이트나 API 요청과 같은 side effect를 가지지 않았을 때만 유용하다. 만약 side effect를 가지고 false를 리턴한다면, 이런 side effect는 기대하지 않은 행동을 초래할 수 있다.

Returning Fragment

Fragment는 컴포넌트를 렌더링할 때 불필요한 DOM 요소를 생성하지않는다. DOM 구조에 영향을 주지 않고 요소를 함께 그룹화하는 데 사용한다. Fragment는 DOM에 렌더되지 않고 Fragment의 자식요소들은 렌더되므로 사용하는 케이스가 다르다.

결론?: false로 하면 이상한 경우가 있으니 null 사용해라

그런 경우가 어떤 경우인가

shouldComponentUpdate
어떤 컴포넌트의 render()가 자신이 다시 호출될 필요가 없음에도 호출되는 것을 막기위해 사용하는 것
반환값이 true이면 render가 호출되고, false이면 render가 호출되지 않음

shouldComponentUpdate(nextProps: Props, nextState: State) {
  return this.props.title !== nextProps.title || this.state.input !== nextState.input
  }

Reference

https://tech.jotform.com/return-null-vs-return-false-in-react-826d8abcc429
https://junghyeonsu.com/posts/react-fragment-vs-null/
모던 리액트 Deep Dive