Next.js Context 사용법

Next.js 개발할때

 

부모컴포넌트에서 자식컴포넌트로 props를 넘겨야 할 일이 다분합니다.

 

단순하게 부모->자식 컴포넌트로 넘길땐 괜찮지만

 

 

firstComponent -> secondComponent -> thirdComponent

 

이런식으로 여러 컴포넌트를 거쳐 props를 넘기게 되면 나중에 유지보수하기도 힘들고 복잡하고 머리아프죠

 

이럴때 사용하는게 Context 입니다.

 

보통 로그인한 유저 데이터나 전역 어디서든 사용할 수 있는 데이터를 불러올때 Context를 사용합니다.

 

저같은 경우엔 axios instance를 Context에 담았습니다.

 

사용법을 알아봅시다.

 

 

// SomeContext.ts
import { createContext } from "react";
export default const someContext = createContext();

 

// _app.tsx
import someContext from "./SomeContext"

export default function App({ Component, ..pageProps }: AppProps) {
    const someValue = "value";
    <someContext.provider value={{ someValue }}>
        <Component {{..pageProps}}/>
    <someContext.provider/>
}

 

// SomeComponent.tsx
import { useContext } from "react";
import someContext from "./SomeContext";

export default function SomeComponent() {
	const value = useContext(someContext);
	console.log(someValue) // "value";
}

 

_app.tsx 파일처럼

 

provider value props에 object 형태로 값을 담게 되면

 

모든 컴포넌트에서 값을 사용할 수 있게 됩니다.