react, undefined 렌더링하지 않기

라용·2022년 12월 7일
0

'리액트를 다루는 기술' 책 일부 내용을 정리했습니다.

리액트 컴포넌트에서 함수가 undefined 만 반환하는 경우 오류가

import './App.css'

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

export default App;

// jsx 안에 있다면 오류가 나지 않습니다.

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

그래서 어떤 값이 undefined 일 수 있다면, OR(||) 연산자를 사용해 해당 값이 undefined 일 때 사용할 값을 지정할 수 있습니다.

import './App.css'

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

export default App;

// jsx 안에서 표현한다면,

function App() {
	const name = undefined;
    return <div>{name || '괜찮음'}</div>;
}
profile
Today I Learned

0개의 댓글