[React] undefined 렌더링하지 않기

- 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.

- 다음과 같은 코드는 오류를 발생시킨다.

import './App.css';

function App() {
  const name = undefined;
  return name;
}
export default App;

 

위 코드의 결과

 

 

- 어떤 값이 undefined 일수도 있다면, OR( || )연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import './App.css';

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

export default App;

 

 

- 반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import './App.css';

function App() {
  const name = undefined;
  return <div>{name}</div>;
}
export default App;

 

- name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 코드를 작성하며 된다.

import './App.css';

function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>;
}
export default App;

위 코드의 결과