undefined 를 랜더링하지 않기

• null과 undefined의 차이

1. null : 값이 없는 것.
   ex) 친구 : null -> 친구가 존재하지 않는 것.
2. undefined : 아직 값이 정의되지 않는 것.
   ex) 범인 : undefined -> 범인이 확실히 존재하지 않는 것. 즉 피의자 신분

   undefined 를 랜더링하지 않기

   : react componenet에서는 함수에서 undefined를 반환하여 렌더링하는 상황을 만들면 안된다.

import React from 'react;

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

• JSX 내부에서 undefined를 랜더링하는 것은 OK!

import React from 'react';

function App() {
  const name = undefined;
  return <div>이름을 정의할 수 있나요? 대답:{name} 입니다.</div>;
}

export default App;

• 어떤 값이 undefined 일 수 있다면, OR(||) 연산자를 사용하여, 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.
  cf) or 연산자는 조건 둘 중 하나만 참이어도 참이다.

import React from 'react';

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

export default App;

• name 값이 undefined 일 때 보여 주고 싶은 문구가 있을 경우

import React from 'react';

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

export default App;