처음 만난 리액트 문서
9.4 컴포넌트 렌더링 막기
지금까지는 여러가지 연산자를 사용해서 조건부 렌더링을 하는 방법에 대해서 배워봤는데, 그렇다면 컴포넌트를 렌더링 하고 싶지 않을 때는 어떻게 해야 할까요? 바로 null을 리턴하면 됩니다. 왜냐하면 리액트에서는 null을 리턴하면 아무것도 렌더링 되지 않기 때문이죠. 아래 코드를 한 번 볼까요?
function WarningBanner(props) {
if (!props.warning) {
return null;
}
return (
<div>경고!</div>
);
}
위에 나온 WarningBanner라는 컴포넌트는 props.warning의 값이 false인 경우에, null을 리턴합니다. 다시 말하면, props.warning의 값이 true인 경우에만 경고 메시지를 출력하고 false인 경우에는 아무것도 출력하지 않는 컴포넌트인 것이죠. 아래에서 이 WarningBanner컴포넌트를 실제로 사용하는 코드를 보도록 하겠습니다.
function MainPage(props) {
const [showWarning, setShowWarning] = useState(false);
const handleToggleClick = () => {
setShowWarning(prevShowWarning => !prevShowWarning);
}
return (
<div>
<WarningBanner warning={showWarning} />
<button onClick={handleToggleClick}>
{showWarning ? '감추기' : '보이기'}
</button>
</div>
)
}
위 코드에 나오는 Page컴포넌트는 showWarning이라는 state의 값을 WarningBanner컴포넌트의 props로 전달하여, showWarning의 값에 따라 경고문을 표시하거나 표시하지 않게 됩니다. 이처럼 리액트에서는 특정 컴포넌트를 렌더링하고 싶지 않을 경우, null을 리턴하면 된다는 것을 기억하세요. 그리고 참고로 클래스 컴포넌트의 render()함수에서 null을 리턴하는 것은 컴포넌트의 라이프사이클 함수에 전혀 영향을 미치지 않습니다. 예를 들면, componentDidUpdate()함수는 여전히 호출됩니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page