데이터 로딩은 서버 사이드 렌더링을 구현할 때 까다로운 문제 중 하나이다. 이때 데이터 로딩은 API 요청을 의미한다. 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링 되지 않는다. 그 대신 renderToString 함수를 한 번 더 호출해야 한다. 거기다 서버에서는 componentDidMount 같은 라이프 사이클 API도 사용 불가능 하다. SSR의 데이터 로딩을 해결할 수 있는 방법은 많지만, 이번에는 redux-thunk와 redux-saga를 사용해 보자. 1) redux-thunk 코드 준비 여기에서 thunk와 saga, axios를 설치해 주자 npm add redux-thunk redux-saga axios 이번 프로젝..
redux-thunk
redux-thunk redux-thunk는 리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 라이브러리이다. Thunk란? 특정 잡업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. const addOne = x => x + 1; const addOneThunk = x => () => addOne(); const fn = addOneThunk(1); setTimeout(() => { const value = fn(); // fn이 실행되는 시점에 연산 console.log(value); }, 1000); redux-thunk 라이브러리를 사용하면 thunk 함수를 만들어서 디스패치할 수 있다. 리덕스 미들웨어가 그 함수를 전달받아 store의 disp..
