개요
저는 React 프로젝트를 진행할때 RTK 나 Recoil을 자주 사용하는 편입니다.
그 중 간단한 프로젝트를 진행할때에는 Recoil을 많이 사용하는데 Next.js도 Recoil을 사용할려고 할때는 React와 동일할까요? Next.js SSR , CSR을 구분해서 작성하기 때문에 거의 동일하지만 조금 다르다고 생각하고 있습니다. 그래서 블로그에 작성해 볼려고 합니다.
Recoil 설치하기
npm install recoil공식문서에 나와있는데로 recoil을 설치해줍니다.
그리고 부모 트리에 <RecoilRoot> 컴포넌트를 넣어줘야하는데
Next.js에서의 최상단 부모 트리는 루트 layout.tsx 입니다. (Next.js 14기준)
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className={inter.className}>
<RecoilRoot>
{children}
</RecoilRoot>
</body>
</html>
);
}이렇게 넣으면 될까요? 틀린방법은 아닙니다. 하지만 이렇게 작성할경우 우리를 반겨주는건
use client을 작성하지 않았다고 에러를 반겨줍니다.
즉 Recoil 같은 상태관리는 CSR(client side rendering) 에서만 작동합니다.
그러면 layout.tsx에 use client을 적으면 될까요?
맞습니다. 하지만 이럴경우 metadata나 SSR(server side rendering)을 에서 사용할수 있는것들을 사용할수 없게 됩니다.
그러면 의미가 없어지는거라서 저 같은경우 Recoil의 Provider을 따로 생성해서 넣어주는것을 선택했습니다.
"use client"
import { RecoilRoot } from "recoil";
export default function RecoilProvider({children} : {children : React.ReactNode}) {
return (
<RecoilRoot>
{children}
</RecoilRoot>
)
}이렇게 따로 use client로 RecoilProvider를 만들어서 layout.tsx에 적용해주는겁니다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className={inter.className}>
<RecoilProvider>
{children}
</RecoilProvider>
</body>
</html>
);
}
그러면 더는 에러를 반겨주지 않고 Recoil을 사용할수 있게 됩니다.
'Next.js' 카테고리의 다른 글
| Next.js에서 SVG를 컴포넌트로 불러오기 (0) | 2024.06.19 |
|---|---|
| Next-auth을 이용해서 카카오 로그인을 만들어보자 (0) | 2024.06.06 |
| Next.js에서 styled-components을 사용해보자 (0) | 2024.05.24 |
| Next.js에서 Toast ui 에디터 사용하는법 (0) | 2024.05.24 |
