Written by react-style
on 2021-12-28

[React] Context API

[210914]

Context API를 이용해서 값을 전역적으로 관리할 수 있다. 이 값은 상태일수도 있고, 함수도 된다.

1. Context 값 조회하기

1) Consumer를 이용

import React from "react"; import { createContext } from "react"; const ColorContext = createContext({ color: "black" }); const ColorBox = () => { return ( {(value) => ( )} ); }; export default ColorBox;

2) useContext를 이용

Consumer를 사용하지 않고 Hooks를 사용하여 훨신 편하게 Context 값을 조회할 수 있다.

import React from "react"; import { createContext, useContext } from "react"; const ColorContext = createContext({ color: "black" }); const ColorBox = () => { const { color } = useContext(ColorContext); return ( <> ); }; export default ColorBox;

컴포넌트를 App에서 렌더링하여 사용한다.

import React from "react"; import ColorBox from "./components/ColorBox"; const App = () => { return ( ); }; export default App;

2. Context 값 변경하기

Provider를 사용하여 Context의 value를 변경한다. value를 명시하지 않는다면 오류가 생긴다.

import React from "react"; import ColorBox from "./components/ColorBox"; const App = () => { return ( ); }; export default App;

Provider를 렌더링하는 함수를 만들고 내보내면,

App에서는 이렇게 렌더링할 수 있다.

import React from "react"; import ColorBox, { ColorProvider } from "./components/ColorBox"; const App = () => { return ( ); }; export default App;

3. Context 값 업데이트하기

고정적인 값을 사용하는 것이 아니라 useState Hooks와 같이 이용해 State를 업데이트 할 수 있다.

export const ColorContext = createContext({ //초기값 state: { color: "black", subcolor: "red" }, actions: { setColor: () => {}, setSubcolor: () => {}, }, }); const ColorProvider = ({ children }) => { const [color, setColor] = useState("black"); const [subcolor, setSubcolor] = useState("red"); const value = { state: { color, subcolor }, actions: { setColor, setSubcolor }, }; return ( {children} ); };

다른 컴포넌트에서 const { actions } = useContext(ColorContext); 로 함수를 가져와서 사용할 수 있다.

from http://9yujin.tistory.com/8 by ccl(A) rewrite - 2021-12-28 15:27:28

Top