렌더링되기 전에 데이터를 불러오고 싶은 경우

파이널 프로젝트 진행 중 컴포넌트가 렌더 되기 전에 데이터를 먼저 불러오고 싶은 경우가 있었다. 오늘 기술 면접 스터디를 통해 스터디원과 고민해본 결과 conditional render로 막는 수 밖에 없었다.

useEffect는 컴포넌트가 렌더된 후, paint가 된 후 실행되고

useLayoutEffect는 렌더 후 변경사항들을 paint 하기 전에 실행되고, 그 다음에 화면이 업데이트 된다.

하지만 이 둘 어느것도 componentWillMount 의 역할을 대체할 수 없었다.

componentWillMount 란?

컴포넌트가 DOM 위에 만들어지기 전에 실행되는 것

컴포넌트 렌더링 직전에 호출되고, 주로 서버 사이드 데이터를 호출하는 용도로 사용했다가 deprecated 되었다.

v17 전까지는 deprecated된 메서드들을 unsafe를 생략하고 사용할 수 있다. v17부터는 unsafe라는 Prefix를 붙여서 사용해야된다.

UNSAFE_componentWillMount() {
	console.log('컴포넌트 윌 마운트');
}

왜 deprecated 되었을까?

컴포넌트의 lifecycle이 바뀌었기 때문이다.

error boundaries and the upcoming async rendering mode 가 추가되면서, 특히 비동기 렌더링 모드에서 오류 처리의 중단 동작이 제대로 되지 않고, 메모리 누수를 일으킬 수 있는 것을 확인했다고 한다. 또한 비동기 실행 시점을 예측하지 못하게 된다.
이에 따라 componentWillMount는 deprecated 되었다고 한다.

https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes

어떻게 렌더되기 전 data fetching을 할 수 있을까?

conditional render로 해결할 수 있다.

{ data && <Component data={data} /> }

// 또는
{ data ? <Component data={data} /> : <Loading /> }

// 또는
if (!data) { return null }