호기롭게 시작한지 얼마 지나지 않아 난 큰 벽을 만났다.
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로 한번 더 감싸주면 완성이다!
생각보다 많은 시간이 걸린만큼 뿌듯하다!
해결해보니 코드를 짜기전에 당황하지 말고 한번 차분하게 생각해 보는것이 중요한것 같다.
'프로젝트' 카테고리의 다른 글
NEXT.js Lighthouse 점수 높이기와 Sharp (0) | 2023.07.03 |
---|---|
솔로 프로젝트 회고! (0) | 2023.06.26 |
Next.js 에서는 Redux Wrapper를 사용해야 합니다. (0) | 2023.06.02 |
HTML과 CSS 완 (0) | 2023.05.30 |
HTML로 구조를 만들고 CSS로 옷을 입히자! (0) | 2023.05.28 |