React Context API vs Redux

📖Context API vs Redux

1. Context 와 Redux 는 같은 일을 하나요?
   둘은 다른 도구이며, 다른 목적을 가지고 있습니다.

2. Context 는 상태관리 도구인가요 ?
   아닙니다. Context API 는 단지 종속성 주입의 한 형태일뿐 아무것도 관리하지 않습니다. 상태관리는 일반적으로 useState 와 useReducer 를 통해 일어납니다.

3. useReducer 는 Redux 의 대체품인가요?
   그렇지 않습니다. 유사한 부분들이 있지만 기능에는 큰 차이가 존재합니다.

4. 언제 Context 를 사용해야하나요?
   props drilling 을 피하고자 할 때입니다.

📌 Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.

우선 Prop Drilling 는 문제가 되지 않습니다. prop 전달이 3~5개 정도의 컴포넌트라면 말이죠.

하지만 prop 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 어떻게 될까요? 코드를 읽을 때 해당 prop을 추적하기 힘들어집니다.

그렇기 때문에 유지보수도 더욱 어려워집니다.

1. 언제 Context 와 useReducer 를 사용해야 하나요?
   특정 컴포넌트에서 어느정도 복잡한 상태 관리가 필요한경우입니다

2. Redux 는 언제 사용해야하나요?

   • 여러 위치에 많은 양의 상태 값이 존재 할 때
   • 업데이트 로직이 복잡 할 때
   • 거대한 코드 베이스를 여러 사람이 작업 할 때
   • 상태 변경 시각화가 필요 할 때
   • 사이드이펙트, 메모이제이션, 데이터 직렬화등 관리를 위해 더 강력한 기능이 필요 할 때

📖context API

1. context를 만들어주겠습니다. 불러온 createContext를 이용해서 context를 생성합니다. 실행하면 비어있는 context가 반환됩니다.
2. context에 넣고싶은 값을 만들어 주겠습니다.
3. return부분에 만들어 두었던 context.Provider를 넣은후 value에는 2번의 값(전달해야하는 값)을 넣어줍니다. 그리고 사이에는 props.children을 사용해서 하위 컴포넌트를 렌더링 해줍니다.

이렇게 하면 context 하나가 만들어졌습니다.

import React, { createContext } from "react";

// 1.
export const UserContext = createContext();

const UserStore = (props) => {
  //2.
  const users = {
    name: "sim",
    job: "developer",
  };

  //3.
  return <UserContext.Provider value={users}></UserContext.Provider>;
};

export default UserStore;

context를 provider 가져와서 컴포넌트를 감싸주었습니다. 이렇게된다면 UserStore 하위 컴포넌트에서 값을 사용할수 있습니다.

import "./main.scss";
import Layout from "./components/Layout";
import { UserStore } from "./context/GlobalContext";

function App() {
  return (
    // 생성한 provider를 app.js 또는 index.js에 import 하여 모든 하위 컴포넌트가 포함되도록 감싸줍니다.
    <UserStore>
      <Layout />
    </UserStore>
  );
}

export default App;

이제 값을 사용해 보겠습니다. 사용할때는 useContext를 이용합니다. 처음에 createContext로 만든 context를 가져와서 사용합니다. 아래 예제처럼 사용한뒤 console해보면 Object {name: "sim", job: "developer"} 출력되는걸 확인할수 있습니다.

그리고 {context.name} 을 출력해보면 화면에 잘 출력되는걸 확인할수 있습니다.

import React , {useContext} from "react"
import {UserContext} from "../store/users"

export default function About() {
   const context = useContext(UserContext);
   console.log(context)

   return (

      <div>
      <h3>{context.name</h3>
      </div>
   )
}