[react] react 상태관리 context API, useContext 사용법

context api

 

react에서 context API가 필요한 이유와

사용하는 방법에 대하여 알아보겠습니다.

 

Context API가 필요한 이유

기존에 최상위 컴포넌트에서 여러 레벨을 거쳐  props로 원하는 상태와 함수를 전달 하였지만, context API를 이용하면 단 한번에 원하는 값을 전달하여 사용할 수 있습니다.

복잡한 redux 또는 MobX와 같은 상태 관리 라이브러리를 사용할 필요 없이 context API를 통하여 전역 상태를 손쉽게 관리 할 수 있습니다.

 

Context API가 사용법

createContext() 함수를 사용하여 Context 만들기

• src 디렉터리에 contexts 디렉터리를 만든뒤 그 안에 새로 Store 파일을 만들거나, 최상위 컴포넌트에 바로 입력하여도 됩니다.
• context의 이름은 아무거나 상관이 없고, 하위에서 import로 받아오기 위해 export를 시킵니다.
• {props.children} : 컴포넌트 태그 사이에 내용을 보여주는  props 가 children입니다.

Store.js

import React, { createContext } from 'react';

export const NameContext = createContext({
    name: '' //기본값
    handleChange: () => {} //함수도 전달가능
})

const Store = (props) => {
  const [name, setName] = useState("");

  let [i, setI] = useState(0);

  const handleChange = () => {
    ...
  };

  return (
    <NameContext.Provider value={{ name, handleChange }}>
      {props.children}
    </NameContext.Provider>
  );
};

export default Store;

 

최상위 컴포넌트에서 Provider로 감싸기

• Context API의 데이터에 접근해야 하는 하위 컴포넌트를 return 안에서 Provider로 감싸기
• 전달할 데이터는 value={ } 안에 객체 형태로 넣기

App.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Store from "./screens/mobile/datas/Store";
...

const App = () => {
    return (
     <Store>
      <BrowserRouter>
        <NameContext.Provider value={{ name: 'goddino', handleChange }}>
            <Route path='/start' component={Start} exact={true} />
            <Route path='/Main' component={MainContent} />
            <Route path='/Result' component={Result} />
        </NameContext.Provider>
       <BrowserRouter>
     <Store>
    );
};

export default App;

 

하위 컴포넌트에서 context API 설정하기

• useContext hooks을 불러옵니다.
• 설정했던 context를 import 합니다.
• useContext를 사용하여 value 값을 가져옵니다.

import React, { useContext } from 'react';
import { NameContext } from './App.js';

const Start = () => {
    const { name, handleChange } = useContext(NameContext);

    return (
        <div>
            <span onClick={handleChange}>{name}님 안녕하세요.</span>             
        </div>
    );
};

export default Start;