contextAPI란?
일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.
공식문서에 이렇게 적혀있는데
그냥 한마디로 react 에서 지원하는 전역 상태관리 api 인것이다~~
예전에 사용해본적이 있는데 정리 한번 해볼까 한다.
사용법 🚀
// MyContext.jsx
import {createContext, useState} from 'react';
export const MyContext = createContext();
export function MyProvider({children}){
const [toggle,setToggle = useState(false);
const toggleEvent = () => setToggle(prev => !prev);
return (
<MyContext.provider value={{toggle,toggleEvent}}>
{children}
</MyContext.provider>
)
}
이렇게 따로 context 파일을 만들어서 provider를 만들어 준 뒤,
value 값에 전역적으로 사용하고싶은 요소들을 적어준다.
// App.jsx
import MyContext from './MyContext';
export default function App {
return (
<MyContext>
<Header />
<Body />
<Footer />
</MyContext>
)
}
app.jsx에 아까 만들어놓은 context 의 provider를 감싸준다.
//Header.jsx
import {useContext} from 'react';
export function Header {
const {toggle,toggleEvent} = useContext(MyContext);
return (
)
}그 후 사용하고 싶은곳에서 useContext안에 내가 사용하고 싶은 전역객체가 있는 context를 불러오면 끝 ~!!!
하지만 보통 전반적으로 사용하는것을 따로 두고
공통적으로 어디서만 쓰이는 객체만 있다면 필요한곳에만 provider를 감싸준다.
완존 쉬움 :3
