[React] Context API 개념 익히기

 

 

Context API

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

 

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

 

전역적으로 상태를 공유
원하는 곳에 상태를 바꿔서 그 하위에 값을 공유

 

 

예제 코드

import React, { createContext, useContext } from "react";
import "./style.css";

const themeDefault = { border: "10px solid green" };
const themeContext = createContext(themeDefault); //기본값 설정

function App() {
  const theme = useContext(themeContext);
  return (
    <>
      <div className="root" style={theme}>
        <h1>Context API</h1>
        <Sub1 />
      </div>
    </>
  );
}

export default App;

const Sub1 = () => {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{ border: "10px solid red" }}>
      <div style={theme}>
        <h2>Sub1</h2>
        <Sub2 />
      </div>
    </themeContext.Provider>
  );
};
const Sub2 = () => {
  const theme = useContext(themeContext);
  return (
    <div style={theme}>
      <h2>Sub2</h2>
      <Sub3 />
    </div>
  );
};
const Sub3 = () => {
  const theme = useContext(themeContext);

  return (
    <div style={theme}>
      <h2>Sub3</h2>
    </div>
  );
};

 

 

• createContext(themeDefault) : themeDefault가 기본값인 context 생성(트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값)
• useContext(themeContext) : 사용할 context를 파라미터로 전달
• <themeContext.Provider value={새로운 border값}> 로 감싸진 요소들은 새로운 값을 가짐
  • context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할
• useContext가 리턴하는 값은 그 부모 컨포넌트 중 가장 가까운 Provider의 value가 된다.

 

 

 

결과 화면

 

 

 

 

 

 

정리하자면,

1. context를 생성하고 초기값을 지정해 준다.

const UserContext = createContext(null);

 

2. 값을 사용할 범위를 Provider로 감싸준 후, value 속성에 값을 넣어준다.

      <UserContext.Provider value={{ user }}>
        <Navigation />
        <Header />
        <Routes>
          <Route path="/" element={<Issue />} />
          <Route path="/issue" element={<Issue />} />
          <Route path="/code" element={<Code />} />
          <Route path="/pulls" element={<Pulls />} />
          <Route path="/action" element={<Action />} />
          <Route path="/project" element={<Projects />} />
          <Route path="/security" element={<Security />} />
          <Route path="/insights" element={<Insights />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/new" element={<CreateIssue />} />
        </Routes>
      </UserContext.Provider>

 

3. useContext를 사용해 값을 가져온다.

const data = useContext(UserContext);

 

 

 

***

Context API에서 상태값을 변경하면, Provider로 감싼 모든 자식 컴포넌트들이 리렌더링된다. 이는 상태값과 액션값으로 나누어 사용하면 해결은 가능하다. 하지만 그에 따른 보일러 플레이트 코드가 증가하게 된다.

 

Context API를 굳이 사용하지 않아도 된다면, hooks로 빼내어 사용한다.

hooks로 선언한 부분이 반복적으로 network call을 유발한다면, cache를 통해서 개선해 볼 수 있을 것.  => https://ddiddibbung.tistory.com/91