[React] (리액트 공부하기 35) useContext

1. useContext

React에서 컨텍스트 API를 함수형 컴포넌트에서 쉽게 사용할 수 있게 해주는 훅이다.
컨텍스트를 사용하여 데이터를 컴포넌트 트리 전체에 전달할 때, useContext를 사용하면 중간 컴포넌트들이 데이터를 전달할 필요 없이 가장 가까운 상위 Provider에서 값을 바로 가져올 수 있다.

2. 사용법

1. 컨텍스트 생성

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

// 컨텍스트 생성 및 기본값 설정
const MyContext = createContext("기본값");

2. Provider로 값 전달

function App() {
  return (
    <MyContext.Provider value="컨텍스트 값">
      <MyComponent />
    </MyContext.Provider>
  );
}

3. useContext를 사용하여 값 가져오기

function MyComponent() {
  const value = useContext(MyContext); // Provider에서 전달된 값 사용
  return <div>{value}</div>;
}

3. 주요 특징

1. 컨텍스트 객체를 인자로 사용

useContext는 생성한 컨텍스트 객체를 파라미터로 받는다. 잘못된 파라미터 사용은 동작하지 않는다.

// 올바른 사용
const value = useContext(MyContext);

// 잘못된 사용
const value = useContext(MyContext.Provider); // x
const value = usecontext(MyContext.Consumer); // x

2. 렌더링 최적화

useContext를 사용한 컴포넌트는 해당 컨텍스트 값이 변경될 때만 다시 렌더링 된다. 이를 통해 불필요한 렌더링을 방지한다.

3. 간결한 코드

useContext를 사용하면 함수형 컴포넌트에서 기존의 Consumer 태그를 사용하는 방식보다 코드가 훨씬 간결해진다.