Next.js 에서 Redux 쓰기,,

호기롭게 시작한지 얼마 지나지 않아 난 큰 벽을 만났다.

next.js는 최근 13 버전을 출시하며 App directory 을 사용하게 되었다는 것이었다!

이게 왜 벽이었냐! 거의 모든 블로그나 유튜브 강의 등 은 13버전을 사용하지 않아 모두 App directory쓰지 않았다는 것 때문이다. 이전 React에서 redux를 사용할때와는 다른 환경인 것이다! 그래서 버전을 낮출까 생각도 했지만 지금 상황에서 쓰는법을 알고 싶었다. 그리고 난 할 수 있을거란 근거없는 자신감이 차있었기 때문에 먼 길을 떠나게 되었다. (진짜 짱 멀었다)

 

어떻게 하는거죠,,?

열심히 검색을 해봐도 App directory 를 쓰는 자료는 찾기 어려웠고 공식문서에도 자세히 나오지 않았다. (내가 못찾은 것일지도,,) 그래서 머리속에서 그려지는데로 해보기로 했었다.

내가 생각하기로는 최상위 는 layout.js이고 {children}에 provider를 감싸기만 하면 될것 같았다.

react 에서 사용할때처럼 만들기는 실패했다.

이유는 provider를 감싸지못한다. 이유는 layout.js는 SSR이기 때문에 import { Provider } from "react-redux"; 를 해서 사용 할 수 없기때문!

계속 되는 실패와 비슷한 실험을 통해 하나씩 문제를 생각해 보기로 했고 난 provider가 래핑을 하지 못하는것이 근본적인 원인이라고 생각했다. 그래서 생각한 방법이 Provider 컴포넌트를 랜더링하는것이었다!

Provider 컴포넌트 만들기?

 

일단 생각을 했지만 어떻게 만들지..? 상태였다.

일단 layout.js 에서 사용하지 못했던

이 두개를 import했고 Provider를 컴포넌트로 만들어서 index.js 에서 쓸것이기에 아래처럼 했다.

그리곤 import한 provider로 children을 래핑을 해줘야 하기에 아래처럼 코드를 짰다!

"use client"; 
import React from "react"; 
import { Provider } from "react-redux"; 
import store from "./store"; 

export function Providers({ children }){ 
return(
<Provider store={store}>{children}</Provider> // Provider 가 store에있는 변수를 받아서 children을 랩핑해 다른곳에서도 사용 할 수 있다.
)}

그리고 layout.js 에

 

<Providers>{children}</Providers> 이런식으로 children을 Providers로 한번 더 감싸주면 완성이다!

 

페이지 내에서 사용해보기

 

사용이 된다!

생각보다 많은 시간이 걸린만큼 뿌듯하다!

해결해보니 코드를 짜기전에 당황하지 말고 한번 차분하게 생각해 보는것이 중요한것 같다.