더북(TheBook)

22.2.7 리덕스 상태 HTML 안에 넣기

 

API 중복 요청을 막으려면, 서버사이드 렌더링을 했을 때 리덕스 스토어 안에 들어 있는 상태를 웹 브라우저에서도 그대로 사용해야 합니다.

어떻게 하면 그대로 사용할 수 있을까요? store.getState()를 호출하여 스토어 상태를 가져온 후 html 내부에 <script></script>로 감싸서 상태 값을 페이지의 글로벌 변수로 지정합니다. 그리고 이 값을 웹 브라우저에서 자바스크립트를 실행할 때 리덕스 스토어의 초기 상태로 사용합니다.

우리는 Immutable을 사용하기 때문에, store.getState()를 호출하여 html 쪽에 그대로 넣어 주면 제대로 작동하지 않습니다. HTML에 <script></script>로 넣으려면 객체를 문자열로 변환해야 하는데, Immutable 인스턴스는 문자열로 제대로 변환해 줄 수 없기 때문이죠.

Immutable 객체를 일반 JSON 형태로 바꾼 후 문자열로 변환하는 작업을 진행하면 이 문제를 해결할 수 있습니다. 스토어 내부에는 일반 객체인 것도 있고, Immutable 인스턴스인 것도 있는데요. 손으로 코드를 작성하여 형태에 따라 시리얼라이징해도 되지만, 이런 작업을 손쉽게 자동화해 주는 라이브러리인 transit-js와 transit-immutable-js를 설치하여 사용해 보겠습니다.

yarn으로 해당 라이브러리를 설치하세요.

$ yarn add transit-js transit-immutable-js
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.