[react] useContext Hook + 예제

useContext의 탄생 배경

---

react에서 상위 컴포넌트에서 하위 컴포넌트를 데이터를 전달해야하는 케이스는 자주 발생합니다.

일반적으로 props를 이용하여 데이터를 전달할 수 있지만, 상위 컴포넌트와 하위 컴포넌트 사이에 여러개의 중간 컴포넌트가 있는 경우에는 이 과정이 매우 번거롭습니다. 

이 때 사용하는 것이 useContext입니다. 물론 redux를 사용할 수도 있습니다. 

즉, 데이터를 전역적으로 관리하고 전달하는 경우 편리하게 하기 위해 useContext를 사용합니다. 

 

useContext Hook

---

useContext는 리엑트의 Context API를 사용하여 구현합니다. 

 

1. createContext 함수를 사용하여 새로운 Context 객체를 생성하고,

2. 이후 useContext Hook을 이용해서 해당 데이터를 하위 컴포넌트에서 손쉽게 사용할 수 있습니다.

 

예제

---

import React, { createContext, useContext } from 'react';

const MyContext = createContext('Hello, world'); // 1

export default function MyComponent() {
  return <ChildComponent />;
}

export function ChildComponent() {
  const value = useContext(MyContext); // 2
  return <p>{value}</p>;
}

1. React의 createContext 함수를 사용하여 MyContext라는 새로운 Context 객체를 생성합니다. 

2. 이후 useContext Hook을 이용해서 해당 데이터를 하위 컴포넌트에서 손쉽게 사용할 수 있습니다.

 

props를 따로 넘겨주지 않았음에도 화면에는 Hello, World!가 출력되는 것을 확인할 수 있습니다. 

 

참고자료

---

• react 공식문서

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖