Using Global state with the Context API

PARK·2021년 2월 23일
2

REACT 파헤치기

목록 보기
6/7
post-thumbnail

왜 알아야할까

react의 완성도를 높이기 위해서 Context API, Redux등 상태 관리를 해야한다. Redux는 여러 라이브러리를 사용해서 수월하고 정확한 코딩을 할 수 있게 도와준다. 거기다가 상태 관리 외에 여러 로직에서 기능을 많이 갖고 있다.

하지만 상태관리를 위해 작은 일에도 reducer, action, dispatch등을 선언해야하고 서버에도 data fetching을 처리하는 코드등 Redux를 사용하기에는 learning curve가 어느 정도 있다고 생각했다. 그래서 효율적으로 상태관리를 하고 리액트의 다양한 문법도 같이 활용할 수 있는 Context API를 사용해봤다.

GlobalState


context API를 적극 사용하기 위해서는 전역으로 상태를 관리하는 것이 중요합니다. 코드를 작성해보겠습니다.

GlobalProvider.js
import { createContext } from "react";

const initialState = {
//초깃값들, 명부나 todolist 등등
};
export const GlobalContext = createContext();


const GlobalProvider = (props) => {
  //state <= initialState을 이용한 선언 및 초기화
    return (
        <GlobalContext.Provider value={//state}>
            {props.children}
        </GlobalContext.Provider>
    )
}

export default GlobalProvider;

보통 initialState와 useReducer를 이용해서 state를 생성하고 createContext.Provider의 value를 이용해서 값을 뿌립니다. 그 다음에 컴포넌트에서 useContext로 value를 사용하는 형태가 Globalstate입니다.

	<GlobalContext.Provider
            value={//... }>
            {props.children}
	</GlobalContext.Provider>

createContext로 context를 생성하면 Provider을 통해서 value를 전달하는 것은 일반적으로 많이 사용합니다. 그런데 전역으로 context를 사용하기위해서는 children 문법을 사용하는 것이 좋습니다. 예시를 들어보겠습니다.

App.js
import React from 'react';
import GlobalProvider from './context/globlaState';
import Home from './components/Home';
import LIST from './components/LIST';

function App() {
  return (
    <GlobalProvider>
      <Home/>
      <List/>
    </GlobalProvider>
  );
}

export default App;

Home과 List 컴포넌트는 임시적으로 생성했습니다.

<Home/>
<List/>

Home과 List는 GlobalProvider의 여닫는 태그 안에 위치했음으로 당연히 GlobalProvider에서 children속성을 사용할 수 있습니다.

그러면 GlobalProvider.js에서 {props.children}은 Home 컴포넌트와 List 컴포넌트가 되겠죠

GlobalProvider.js
import { createContext } from "react";

const initialState = {
//초깃값들, 명부나 todolist 등등
};
export const GlobalContext = createContext();


const GlobalProvider = (props) => {
  //state <= initialState을 이용한 선언 및 초기화
    return (
        <GlobalContext.Provider value={//state}>
            {props.children}
        </GlobalContext.Provider>
    )
}

export default GlobalProvider;

함수 선언에서 props를 받고 있고 return에서 children을 사용하고 있습니다. children은 value를 통해 전달된 값을 사용할 수 있습니다.

이런식으로 state와 함수를 관리하면 위에서 아래로 내려오는 단방향 문제를 해결할 수 있습니다. 거기다가 useContext를 사용하면 불필요하게 단계별 컴포넌트 마다 provider나 props를 사용하지 않아도 되는 장점이 있습니다.

const GlobalProvider = ({children}) => {
 //state <= initialState을 이용한 선언 및 초기화
    return (
        <GlobalContext.Provider value={//state} >
            {children}
        </GlobalContext.Provider>
    )
}

이해가 끝났으니 GlobalProvider을 위와 같이 바꾸고 useContext를 사용해보겠습니다.

useContext

useContext훅을 이용해서 전역 상태를 사용해보겠습니다.

const value = useContext(MyContext);

Home.js
import React, { useContext } from 'react';
import { GlobalContext } from '../context/globlaState';
const Home = () => {  
    const {
       //갖고온 value들 초기화
    } = useContext(GlobalContext);
  
    return (
    <>    
     // 렌더링
    </>
    );
}

export default Home;

useContext을 이용해서 글로벌 변수를 관리하고 사용하는 방법을 알아봤습니다.

profile
익숙한 것에 작별을 고해야한다

0개의 댓글