20.4.3 PreloadContext 만들기

현재 getUsers 함수는 UsersContainer의 useEffect 부분에서 호출됩니다. 이를 클래스형으로 작성했더라면 componentDidMount에서 호출했겠지요. 서버 사이드 렌더링을 할 때는 useEffect나 componentDidMount에서 설정한 작업이 호출되지 않습니다. 렌더링하기 전에 API를 요청한 뒤 스토어에 데이터를 담아야 하는데요. 서버 환경에서 이러한 작업을 하려면 클래스형 컴포넌트가 지니고 있는 constructor 메서드를 사용하거나 render 함수 자체에서 처리해야 합니다. 그리고 요청이 끝날 때까지 대기했다가 다시 렌더링해 주어야 하죠.

우리는 이 작업을 PreloadContext를 만들고, 이를 사용하는 Preloader 컴포넌트를 만들어 처리해 보겠습니다.