컴포넌트 렌더링 막는 방법

리액트에서 컴포넌트 렌더링을 막는 방법은 여러 가지가 있다.

특정 조건에 따라 컴포넌트가 렌더링 되지 않도록 제어하는 것이 핵심이다.

 

1. 조건부 렌더링으로 렌더링 막기

조건을 사용해 컴포넌트를 렌더링하지 않도록 제어할 수 있다.

 

(1) && 연산자를 사용해 조건이 false일 경우 렌더링 막기

const shouldRender = false;
return (
  <div>
    {shouldRender && <p>이 텍스트는 렌더링되지 않습니다.</p>}
  </div>
);

 

shouldRender가 false라면 오른쪽 텍스트는 렌더링 되지 않는다.

 

(2) 삼항 연산자를 사용해 렌더링 막기

삼항 연산자에서 특정 조건에 따라 null을 반환하여 아무것도 렌더링 하지 않도록 설정한다.

const isVisible = false;
return (
  <div>
    {isVisible ? <p>보이는 컴포넌트</p> : null}
  </div>
);

 

 

2. 컴포넌트를 아예 반환하지 않기

함수형 컴포넌트 또는 클래스형 컴포넌트 내부에서 특정 조건에 따라 아무것도 반환하지 않으면 렌더링이 막힌다.

(1) 함수형 컴포넌트

return문에서 조건에 따라 null을 반환한다.

function MyComponent({ shouldRender }) {
  if (!shouldRender) return null; // 아무것도 렌더링하지 않음
  return <div>이 컴포넌트는 렌더링됩니다.</div>;
}