undefined 리턴 또는 렌더링?

리액트 컴포넌트에서는 함수에서 undefined를 반환하는 것은 불가하다.

하지만 JSX에서 undefined를 렌더링하는 것은 가능하다.

한번 해보자.

undefined를 리턴

App.js를 다음과 같이 수정한다.

import React from 'react';
import './App.css';

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

export default App;

아무것도 리턴되지 않아 에러가 생긴다.

undefined 리턴시 에러 발생!

 

 

undefined를 JSX 내부에서 렌더링

이번에는 App.js를 다음과 같이 수정한다.

import React from 'react';
import './App.css';

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

export default App;

페이지가 비어있고, 에러 없이 실행된다.