Context란

Context란 컴포넌트 간에 전역적으로 데이터를 공유하기 위한 메커니즘이다.컨텍스트를 사용하면 중간 컴포넌트를 거치지 않고 데이터를 전달 할 수 있으며, 전역 상태 관리하기 위해 Redux와 같은 상태 관리 라이브러리를 사용하지 않아도 된다.

컨텍스트를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 할 수 있다. 일반적으로 컨텍스트는 프로젝트의 상위 계층에 정의되며, 그 하위 컴포넌트에서 접근할 수 있다. (일일이 props를 넘겨주지 않아도 된다.)

리덕스(Redux)와 컨텍스트(Context)의 차이점
리덕스와 컨텍스트 모두 리액트 어플리케이션에서 상태 관리를 위한 도구로 사용된다. 하지만 두개의 접근 방식에는 몇 가지 차이점이 있다.

리덕스는 상태 관리를 위한 라이브러리로, 애플리케이션의 상태를 전역적으로 관리한다. 리덕스는 단방향 데이터 흐름을 따른다. 복잡한 애플리케이션의 상태 관리에 적합하다.

반면에 컨텍스트는 리액트 자체 기능으로서, 컴포넌트 간에 데이터를 전달하고 공유하기 위한 방법이다.컨텍스트는 리덕스보다 단순한 상태 관리 시날리오와 작은 규모의 애플리케이션에서 사용하기에 유용하다.

예시

Props를 사용한 예시

import React from 'react';

// 자식 컴포넌트
const ChildComponent = (props) => {
  return <div>{props.message}</div>;
};

// 부모 컴포넌트
const ParentComponent = () => {
  const message = '안녕하세요!';

  return <ChildComponent message={message} />;
};

export default ParentComponent;

Context를 사용한 예시

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

// 컨텍스트 생성
const MyContext = createContext();

// 자식 컴포넌트
const ChildComponent = () => {
  const message = useContext(MyContext);

  return <div>{message}</div>;
};

// 부모 컴포넌트
const ParentComponent = () => {
  const message = '안녕하세요!';

  return (
    <MyContext.Provider value={message}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

export default ParentComponent;