Recoil을 사용하기 위해서는 최상위 컴포넌트에서 RecoilRoot로 컴포넌트를 감싸줘야한다.
그래서 최상위에 있는 layout.tsx에 이런 식으로 추가를 하고 싶은데
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<RecoilRoot>{children}</RecoilRoot>
</body>
</html>
);
}
위 같이하면
Server Error
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
이와 같은 에러가 발생한다. 에러를 확인해보니 createContext는 오직 Client Components에서만 사용 가능하다는 뜻이다.
그렇다면 layout.tsx를 Client Components로 바꿔야하는데 그렇게는 못한다. next.js에서 지원하지 않기 때문이다.
따라서 따로 Client Components를 만들어서 layout.tsx에 import 해와서 적용해야한다.
"use client";
import { RecoilRoot } from "recoil";
import React from "react";
export default function RecoilComponent({
children,
}: {
children: React.ReactNode;
}) {
return <RecoilRoot>{children}</RecoilRoot>;
}export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<RecoilComponent>{children}</RecoilComponent>
</body>
</html>
);
}
이렇게 하면 RecoilRoot를 layout.tsx에 적용할 수 있게 된다.
참고
Recoil을 Next.js 에서 사용하는 방법에 대한 고찰과 children prop pattern
🧐 의문점: Recoil을 Next.js에서 사용할 때는 Recoil을 따로 client component로 감싸서 사용해야한다고 한다. 왜 불편하게 한번 더 감싸야하는 걸까? 개요 next 프로젝트에 recoil을 도입하려고 하고 있었다
velog.io
'React.js' 카테고리의 다른 글
| [React.js , Next.js] hydration이란 with (Unhandled Runtime Error Error: Text content does not match server-rendered HTML.) (0) | 2024.01.16 |
|---|---|
| [Next.js] SSR에서 recoil-persist 사용하기 (1) | 2024.01.13 |
| [TailWind] calc() 를 사용해서 height 크기를 정해보자. (0) | 2023.11.27 |
| [React] useEffect 연속 2번 동작 원인 및 해결 (0) | 2023.11.13 |
| [React] useEffect 처음 마운트 함수 실행 막기 (0) | 2023.10.14 |
Recoil을 사용하기 위해서는 최상위 컴포넌트에서 RecoilRoot로 컴포넌트를 감싸줘야한다.
그래서 최상위에 있는 layout.tsx에 이런 식으로 추가를 하고 싶은데
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<RecoilRoot>{children}</RecoilRoot>
</body>
</html>
);
}
위 같이하면
Server Error
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
이와 같은 에러가 발생한다. 에러를 확인해보니 createContext는 오직 Client Components에서만 사용 가능하다는 뜻이다.
그렇다면 layout.tsx를 Client Components로 바꿔야하는데 그렇게는 못한다. next.js에서 지원하지 않기 때문이다.
따라서 따로 Client Components를 만들어서 layout.tsx에 import 해와서 적용해야한다.
"use client";
import { RecoilRoot } from "recoil";
import React from "react";
export default function RecoilComponent({
children,
}: {
children: React.ReactNode;
}) {
return <RecoilRoot>{children}</RecoilRoot>;
}export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<RecoilComponent>{children}</RecoilComponent>
</body>
</html>
);
}
이렇게 하면 RecoilRoot를 layout.tsx에 적용할 수 있게 된다.
참고
Recoil을 Next.js 에서 사용하는 방법에 대한 고찰과 children prop pattern
🧐 의문점: Recoil을 Next.js에서 사용할 때는 Recoil을 따로 client component로 감싸서 사용해야한다고 한다. 왜 불편하게 한번 더 감싸야하는 걸까? 개요 next 프로젝트에 recoil을 도입하려고 하고 있었다
velog.io
'React.js' 카테고리의 다른 글
| [React.js , Next.js] hydration이란 with (Unhandled Runtime Error Error: Text content does not match server-rendered HTML.) (0) | 2024.01.16 |
|---|---|
| [Next.js] SSR에서 recoil-persist 사용하기 (1) | 2024.01.13 |
| [TailWind] calc() 를 사용해서 height 크기를 정해보자. (0) | 2023.11.27 |
| [React] useEffect 연속 2번 동작 원인 및 해결 (0) | 2023.11.13 |
| [React] useEffect 처음 마운트 함수 실행 막기 (0) | 2023.10.14 |
