[ React ] 함수형 컴포넌트의 렌더링은 'null'을 반환하여 막는다.

 

 

 

함수형 컴포넌트에서 렌더링을 막고 싶다면  'null'을 반환하면 된다.

'null'이 렌더링되지 않는 이유는 JSX로 작성한 코드는

React.createElement()함수 호출로 변환하여 처리하는데

'null'로 반환하면 해당 컴포넌트는 내부적으로 아무런 React요소를 생성하지 않게 된다.

그래서 React.createElement()함수 호출이 이루어지지 않으니 렌더링 대상도 되지 않는다.

 

 

function ExComponent({ shouldRender }){
	if (!shouldRender) {
    	return null;
    }
    
    return <div>렌더링됨</div>;
}

 

shouldRender가 false일때 return null이 실행되면  

<div>렌더링됨</div>;부분이 생성되지 않는다.

 

클래스 컴포넌트에서 render()메서드가 null을 반환하는 것은

컴포넌트는 렌더링 되지만 화면에 나타나지는 않는다.

그리고 null을 반환하더라도 다른 라이프사이클 메서드는 여전히 호출될 수 있다.

 

React의 렌더링 프로세스는 컴포넌트 트리를 순회하면서

가상 DOM을 만들어 실제 DOM에 업데이트를 적용하는 방식으로 동작하는데

클래스 컴포넌트의 'render()'메서드가 호출되면 반환된 결과가

가상 DOM에 반영되고 실제 DOM에도 반영되기 때문에

렌더링은 되는 것이고 null이라 화면에 아무것도 없는 빈 상태가 된다.