👀 useContext란? #8

이번 포스팅은 useContext에 관하여 작성해보려고 한다. 

 

먼저 간단하게 useContext의 역활에 대해서 알아보자. React는 대부분의 컴포넌트들은 부모와 자식 관계를 갖는 형식으로 컴포넌트를 구성한다. 부모에서 자식 컴포넌트로 state 정보를 전달하기 위하여 props를 활용한다는 것은 잘 알고 있을 것이다. 

Prop Drilling 예시

위의 간단한 사진을 예로들어 useContext의 역할을 대하여 설명해 보도록 하겠다. 먼저 "Prop Drilling"이라 간단하게 state 및 prop를 사용해야하는 자식 컴포넌트까지 넘겨주는 것을 이야기한다. 여기서 문제가 발생한다 공통으로 사용하는 Prop의 경우 최하단에서 사용하는 Prop일 경우 상단에서 사용하지 않지만  최하단에서 사용하기 위해 컴포넌트의 Prop으로 최하단까지 전달하여 사용해야한다. 이때 트리안의 컴포넌트 내부에서 Prop을 필요한 곳에서만 받아서 바로 받아서 사용할 수 있도록 해주는 것이 useContext이다.

 

 

◼ useContext 사용방법

useContext를 사용하기위해서는 먼저 creactContext를 활용하여 Context 객체를 만들어서 사용해야 한다.  createContext를 통해 만들어진 Context의 provider로 컴포넌트를 감싸 컴포넌트에게 값을 전달한다. useContext는 이와 같은 순서로 사용되며 먼저 createContex부터 useContext까지 활용하여 Context를 제공하고 값을 공유하는 방법에 대해 설명해 보도록 하겠다.

 

1. createContext

먼저 useContext를 사용하기 위해서 creatContext를 같이 사용해야 한다. 아래는 createContext의 구조이다. 먼저 createContext의 파라미터는 defaultValue로 내가 공유해서 사용하고 싶은 값을 전달해 주면 된다.

createContext 구조

 반환값으로는 Context 객체가 반환된다. 이때 Context 객체를 활용할 수 있도록 Provider와 Consumer가 지원되며, 각자의 역할은  Provider는 아래의 코드와 같이 컴포넌트에게 Context 값을 제공해 주는 역할을 한다. 여기서 value를 통하여 해당 Context를 활용하는 모든 컴포넌트들에게 전달되는 값을 변경할 수 있다.

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

 

다음으로 Consumer는 React에서 현재는 사용을 권하지 않고 useContext를 활용하여 사용하는 방법을 제시하고 있다.

function Button() {
  // ❌ 이전 방식 (권장하지 않음)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

function Button() {
  // ✅ 권장되는 방법
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

 

2. useContext

앞서 설명했듯이 useContext는 Context의 consumer와 같은 역할을 한다. useContext는 아래의 구조를 갖고 있다. useContext를 사용하기 위해서는 createContext를 통해 만든 Context객체를 전달한다. 반환값으로는 Context 객체가 갖고 있는 value에 대하여 반환된다.

useContext 구조

 

 

◼ Context를 활용한 예시코드

Context를 활용하기 위한 createContext와 useContext를 활용하여 'Prop Drilling' 없이 prop를 자식 컴포넌트에게 전달해 보는 코드를 작성해 보도록 하겠다.

 

아래의 코드는 Context를 사용하지 않고 Prop Drilling으로 Prop를 자식컴포넌트들에게 전달한 코드이다. 지금부터 해당 코드를 Context를 활용하게 구성해 보도록 하겠다.

 

 

첫 번째로 createContext를 활용하여 Context를 생성한다. 

import { createContext } from 'react';

// Context 생성
// 외부에서 사용할 수 있도록 export 접두사 활용
export const LevelContext = createContext(1);

 

다음으로는 해당 Context를 활용하여  값을 전달해 주기 위하여 Provider로 자식 컴포넌트를 감싸준다.

//Section.js

import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

 

 

마지막으로 Context를 통해 값을 전달받아 사용한다.

//Heading.js

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

 

 

이와 같이 작성을 하여 Context를 활용한 아래의 코드를 작성할 수 있다. 현재 코드는 level이 명시적으로 적혀있다. 해당 코드를 level를 정시적으로 사용하는 것이 아닌 자식 컴포넌트일 경우 'level = level+1'를 활용하여 level를 1,2,3처럼 명시하지 않아도 되도록 고쳐보도록 하자.