undefined 를 랜더링하지 않기

최지원·2020년 8월 3일
0
  • 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;

0개의 댓글