React Hooks:useContext(전역 상태관리)

상태 관리를 리덕스,리덕스툴킷 라이브러리만 사용해서 관리했는데 리액트에도 상태를 전역으로 관리하는 훅이 있어서 가끔  굳이 라이브러리를 설치하면서 전역으로 관리를 해야할까 생각 했던곳에 적용해야겠다 싶어 공부하고자 한다

 

React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게한다 

=>Context는 전역 상태 관리를 할 수 있는 수단일 뿐이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고, 효율적으로 할 수 있게 해주는 기능들을 제공해주는 도구이다(상태 관리 라이브러리와 Context 완전히 별개의  개념이다),Context를 쓴다면, 각기 다른 상태마다 새롭게 Context를 만들어주어야 한다

 

 

Context API란?

리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다

 

createContext()

createContext(initialValue);

• context 객체 생성
• createContext() 함수 호출 시 Provider와 Consumer Component 반환
• initialValue : Provider를 사용하지 않았을 때 적용될 초기값

 

Context.Provider

<Context.Provider>
...
</Context.Provider>

• 생성한 context를 하위 Component에 전달

 useContext()

const userCtx = useContext(context);

• context의 변화를 감시
• 설정한 상태를 불러올 때 사용

App.js

import React, { createContext } from "react";
import Children from "./Children";

// AppContext 객체를 생성한다.
export const AppContext = createContext();

const App = () => {
  const user = {
    name: "김모양",
    job: "백수"
  };

  return (
    <>
      <AppContext.Provider value={user}>
        <div>
          <Children />
        </div>
      </AppContext.Provider>
    </>
  );
};

export default App;

Children.js

useContext 를 미적용

import React from "react";
import { AppContext } from "./App";

const Children = () => {
  return (
      <AppContext.Consumer>
        {(user) => (
          <div>
            <h3>이사람의 이름은 {user.name}입니다.</h3>
            <h3>이사람의 직업은 {user.job}입니다.</h3>
          </div>
        )}
      </AppContext.Consumer>
  );
};

export default Children;

useContext 를 적용

import React, { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  // useContext를 이용해서 따로 불러온다.
  const user = useContext(AppContext);
  return (
     <div>
            <h3>이사람의 이름은 {user.name}입니다.</h3>
            <h3>이사람의 직업은 {user.job}입니다.</h3>
          </div>
  );
};

export default Children;

=> <AppContext.Consumer> 같은 코드를 사용해서 복잡하게 작성하지 않고 
const user = useContext(AppContext)를 통해 Context를 불러 온 후 바로 사용이 가능하다

 

 

 

Context 사용전에 고려할 것

context를 사용하면 컴포넌트 재사용이 어려워지므로, 꼭 필요한 경우에만 사용하는 것이 좋다.

많은 컴포넌트들로 구성되있어도, 정보가 한 곳에서만 사용된다면 컴포넌트 병합을, 여러 곳에서 사용된다면 Context가 유리하다