시작에 앞서 아래의 라이브러리를 설치해주세요 (single page application을 기준으로 설명되었습니다.

nextjs에서도 거의 비슷하다 일부라이브러리가 다릅니다.

npm install --save redux 

npm install --save react-redux

npm install --save redux-devtools-extension

레덕스가 무엇인가에 대해 한줄로 적는 다면, "정보를 캐싱해서 서비스의 어디에서도 편안하게 read/write를 할 수 있게 한다 입니다.

일단 레덕스가 무엇인지 이해를 하기 위해 가장 간단한 예시를 들어 보면 다음과 같습니다.

유저가 로그인을 하고 나면, 우리는 채팅 리스트 페이지로 보낼겁니다. 채팅 페이지 리스트에 hi! 누구누구 이렇게 보이고 싶고, 방법은 history.push("/chat/list", {user:user}) 이렇게 chat list로 보내고, 거기서 user props를 읽어서 페이지를 랜더링 하는 것입니다.

문제는 페이지 이동시에, 유저 정보를 가지고 랜더링을 할 부분이 있는 경우 항상 .push(~, {user:user}) 를 달고 다녀야 하는 것이죠. user만 있으면 상관 없지만, 컴플렉시티가 올라갈 수록 복잡해지고 빼먹는 실수도 빈번히 하게 됩니다.

또한 유저 정보를 계속하여 브라우저가 가지고 있어야 합니다. 그리고 브라우저를 리프레시 해도 유저의 로그인은 계속 되어 있어야 합니다. 유저가 로그아웃을 하면 지워주기도 하구요

그래서 우리가 할 것을 한마디로 정리하면