리액트 context

Context

리액트(React)에서 Context는 컴포넌트 트리 전반에 걸쳐 전역적으로 데이터를공유할 수 있도록 도와주는 기능이다. 이 기능은 "prop drilling" 문제를 해결하는 데 특히 유용하다. "prop drilling"이란, 컴포넌트 계층 구조의 깊숙한 자식 컴포넌트에 데이터를 전달하기 위해 중간 컴포넌트들을 통해 props를 계속 전달해야 하는 상황을 말한다.

Context의 주요 구성 요소

1. React.createContext(): Context 객체를 생성하는 함수이다. React.createcontext()는 두 개의 요소를 반환한다.

   • Provider: 데이터를 제공하는 역할을 하는 컴포넌트
   • Consumer: 데이터를 소비하는 역할을 하는 컴포넌트

2. Provider: Context 객체가 제공하는 컴포넌트로, value라는 prop을 받아 이 값을 하위 트리의 모든 consumer 컴포넌트에게 전달한다. 즉, 트리의 하위 모든 컴포넌트가 이 value에 접근할 수 있다.

3. Consumer: Context의 데이터를 사용하기 위해서 감싸야 하는 컴포넌트이다. consumer는 함수 컴포넌트로서, 해당 함수의 인자로 value를 전달받는다.

4. useContext: React 16.8 버전에서 도입된 React Hook으로, 함수형 컴포넌트 내에서 Context의 값을 더 간단하게 사용할 수 있다. useContext를 사용하면 Consumer 컴포넌트를 사용하지 않고도 Context 값을 가져올 수 있다.

Context 사용 예제

1. Context 생성:

import React from 'react';

// ThemeContext를 생성
const ThemeContext = React.createContext('light');

2. Provider 사용:

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

App 컴포넌트는 ThemeContext.Provider로 감사쪄 있으며, 이때 value prop으로 "dark" 값을 전달한다. 이 값은 하위의 모든 컴포넌트에서 접근 가능하다.

3. Consumer 사용:

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

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <button theme={value}>I am styled with {value} theme!</button>}
    </ThemeContext.Consumer>
  );
}

ThemedButton 컴포넌트는 themeContext.Consumer를 사용하여 현재 Context 값을 접근하고, 이 값을 이용해 버튼을 렌더링한다.

4. useContext 사용(Hook):

import React, { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled with {theme} theme!</button>;
}

useContext를 사용하면, 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서도 Context의 값을 쉽게 사용할 수 있다.

Context를 사용할 때 주의할 점

• Context 남용: Context는 글로벌 상태를 관리하느 데 유용하지만, 너무 많이 사용하면 컴포넌트 재사용성이 떨어질 수 있다. Context는 주로 전역적으로 공유되어야 하는 데이터(예: 테마,사용자 인증 정보 등)에만 사용하는 것이 좋다.
• 성능 최적화: Context의 값이 변경되면, 해당 Context를 사용하는 모든 하위 컴포넌트가 다시 렌더링된다. 이로 인해 불필요한 렌더링이 발생할 수 있으므로, 성능 최적화를 염두에 두고 사용해야 한다.

Context는 리액트 애플리케이션에서 전역적인 데이터를 관리하고, 복잡한 props 전달을 피하는 데 매우 유용한 도구이다. 단, 남용하지 않고 신중하게 사용해야 애플리케이션의 성능과 유지 보수성을 높일 수 있다.