React context API 사용법

컴포넌트들이 많아지면 props로 전달해주기가 매우 번거로울 때가 있다
그래서 많이 사용 되었던 것이 redux와 mobx 인데 이것들을 사용하지 않고 전역 상태를 관리할 수 있는 ContextAPI에 대해 알아보자
contextAPI는 먼저 redux의 store처럼 createContext()를 이용하여 특정 파일을 만들어 데이터를 넣어둔다.
그다음 특정한 컴포넌트에서 연결해두면 그 컴포넌트를 포함한 하위 모든 컴포넌트들은 store안에 있는 데이터에 접근할 수 있는 권한을 부여 받는다.
예를 들어 App.js라는 최상위 컴포넌트에 sotre를 연결해두면 하위 모든 컴포넌트는 그 상태에 접근할 수 있다.
그래서 일일이 상태들을 props로 넘겨주지 않고도 사용 가능하다.

ContextAPI를 사용하는 간단한 예제를 한번보자.

//store/users.js
import React, { createContext, useState } from 'react'

export const UserContext = createContext();
// createContext()로 비어 있는 context가 만들어진다.

function UserStore (props) {
  // props로 지정하고 싶은 상태를 만들어준다.
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");

      
    return (
      //value를 통해 전달하고 싶은 값을 넣어준다.
        <UserContext.Provider value={{
            username,
            setUsername,
            email,
            setEmail,
        }}
        > 
        {props.children}
	// 하위 컴포넌트 렌더링
        </UserContext.Provider>
    )
}


export default UserStore

contextAPI를 생성할때는 createContext를 사용한다.
그다음 상태들을 설정해주고 전달해주고 싶은 값들을 provider로 처리해주면 된다.
이렇게 하면 하나의 contextAPI가 완성된다.
이제 contextAPI를 사용하기 위해 특정 컴포넌트에 연결시보자.
모든 컴포넌트가 접근할 수 있도록 App.js에 연결시켜보겠다.

//App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import routes from "./routes";
import Main from "./screens/Main";
import Myapge from "./screens/Mypage";

import UserStore from "./store/UserStore"
// App.js에 UserStore를 불러온다.
function App() { 

  return (
    <UserStore>
    // 제일 위쪽에서 UserStore를 감싸준다.
        <Router>
            <Switch>
              <Route path={routes.main} exact>
                <Main />
              </Route>
              <Route path={routes.mypage}>
                <Myapge />
              </Route>
            </Switch>
        </Router>
    </UserStore>
  );
}

export default App;

위에 코드처럼 store에서 UserStore를 불러오고 그것으로 모든 컴포넌트를 감싸주었다.
이제 App.js에 감싸줬으니 하위 컴포넌트는 UserStore안에있는 state에 접근할 수 있다.

    const [username, setUsername] = useState("Butterfly");
    const [email, setEmail] = useState("Butterfly@gmail.com");

//page/main.js
import Rreact, { useContext } from 'react';
// contextAPI를 불러오기 위해선 useContext를 사용해야된다.
import { UserContext } from '../stor/user';
const Main = () => {
  // useContext의 인자값으로 UserContext를 넣어준다.
  const context = useContext(UserContext);
  const {username, email } = context;
  return(
    <>
    	<h3>`username: ${username}`</h3>
    	<h3>`email: ${email}`</h3>
    </>
  );

}

contextAPI를 불러오기 위해서 useContext를 사용하고 그 인자값으로 store에서 만들었던 UserContext를 사용하면 된다.
return 값을 보면 username과 email이 잘 나오는 걸 확인할 수 있다.