[React-Basic-Hooks] 10. Context

Context

React에서 data는 top-down(parent to child)로 흐른다. Virtual DOM 자체가 트리 형태 앱 전체에서 여러군데에서 사용되는 값(global value)을 상위에서 전달하는 방법

여러 컴포넌트에서 공통으로 사용하는 state가 있다면 sync를 맞춰야 하니 공통 부모로 state를 올림, 부모에서 state 관리하고 자식에서 props로 받음
자식 컴포넌트에서 부모 컴포넌트의 state를 변경해야 하는 상황이면 state를 변경할 수 있는 함수를 자식에게 props로 전달 후 변경이 필요하면 전달받은 이 함수를 실행해서 변경
기능이 복잡해지고 트리가 복잡해지고 state도 형제 뿐만 아니라 아주 깊은 하단의 자식에서도 사용 및 변경해야 한다면 props를 계속 단계별로 전달해야 한다. 그럼 중간의 컴포넌트에서는 거기서는 사용하지 않지만 단순히 자식에게 전달하기 위해서 의미없이 받게 된다. 이런것들을 해결하기 위해서 Context & Redux or Mobx (상태관리를 위한 도구, Context가 최적화됨)

usage

React.createContext(defaultValue) 통해 Context 생성 -> Context도 ReactComponent
<Context.Provider value={contextValue}>를 통해 context 주입
하위(깊이 상관없이) 어느 component에서라도 useContext(Context) 통해 contextValue 획득가능

Context.Provider에 값 변경이 있을 때 useContext(Context) 사용한 모든 component는 re-render 발생

useContext에서 listen하고 있는 컴포넌트의 변경이 생길 때 re-render

Context를 너무 빈번하게 사용하면 re-render가 자주 일어나기 때문에 최적화가 필요한데 최적화를 직접 적용하기 보다는 Redux or Mobx 사용 Global 하게 사용할 수 있는 곳에서 Context를 활용하는게 좋음

@09-context

// AS-IS
function App() {
  return <Toolbar theme="green" />;
}

// 내부에서 전혀 theme를 사용하지 않고 있음 
// ThemedButton을 위해 단순 전달
function Toolbar({ theme }) {
  // The Toolbar component must take an extra "theme" prop
  // and pass it to the ThemedButton. This can become painful
  // if every single button in the app needs to know the theme
  // because it would have to be passed through all components.
  return (
    <div>
      <ThemedButton theme={theme} />
    </div>
  );
}

const ThemedButton = ({ theme }) => (
  <button className={`button-${theme}`}>
    button
  </button>
)

export default App;

// TO-BE
import { createContext, useContext } from 'react';

// green으로 초기화
const ThemeContext = createContext('green');

const useThemeContext = () => {
  const theme = useContext(ThemeContext) // value 값
  return theme
}

function App() {
  return (
    <ThemeContext.Provider value="blue">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

const ThemedButton = () => {
  const theme = useThemeContext()
  return (
    <button className={`button-${theme}`}>
      button
    </button>
  )
}

export default App;

beecomci / today_i_learned

[React-Basic-Hooks] 10. Context #15

Context

usage