Context란 무엇인가?

SwiftUI에는 EnvironmentObject라는 것이 있다. 이는 ObservableObject의 일종인데 한 View에 선언을 해두면 그 View의 Child View의 어디서든 사용할 수 있다. 즉 어떤 객체가 자식뷰와 자식의 자식의 자식의 자식 뷰에서 사용한다고 할 때 중간에 이 객체가 필요 없는 다른 View에 굳이 해당 객체를 전달해야하는 수고를 덜어주는 기능이다.

Context도 완전하게 동일한 개념이다. Context를 선언하고 ContextProvider를 만들어서 Component를 감싸면 해당 Component의 자식 트리에 있는 어떤 곳에서도 해당 context를 사용할 수 있다. 또한 custom hook, 혹은 reducer와는 다르게 state는 provider에 하나만 존재한다는 특성도 가지고 있다.

Context와 context provider 만들기

예를 들어 웹사이트의 언어를 설정하고 해당 언어에 맞추어 text를 보여주는 기능을 구현하는 예시를 들어보자. 이런 기능을 만들기 위해서는 context 안에 어떤 언어가 선택되었는지 State를 가지고 있어야 하고 언어를 바꿀 수 있는 함수를 구현해두어야 한다. 예시 코드는 아래와 같다.

createContext를 통해서 context를 만들고 하위 view에 해당 context사용할 수 있게 해주는 Provider를 만든다. Provider안에서는 다른 component 또는 hook과 마찬가지로 useState, useEffect 등을 사용할 수 있다. value에는 자식 component가 해당 context에서 접근할 수 있는 상태 혹은 함수를 전달한다.

export const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguge] = useState("KO");
  return (
    <LanguageProvider.Provider value={{ language, setLanguge }}>
      {children}
    </LanguageProvider.Provider>
  );

Provider를 만들면 아래 코드처럼 context에 접근이 가능하게 설정할 최상위 component를 Provider로 감싸준다.

export default function BlogComponent() {
  return (
    <LanguageProvider>
      <Header />
      <Main />
      <Footer />
    </LanguageProvider>
  );
}

Context 사용하기

마지막으로 context를 사용할 때는 useContext안에 context 객체를 넣어주면 된다. 이렇게 하면 어떤 Component에서 language를 변경하더라도 language라는 state를 사용하는 모든 Component의 ui가 업데이트 되게 된다.

function ChildComponent() {
  const { language, setLanguge } = useContext(LanguageContext); 
  // provider의 value에 들어간 값들을 풀어서 가져온다
  return ()
}