useContext

useContext 사용 개요

Parent 1 컴포넌트와 Parent 2 컴포넌트 모두 동일한 데이터를 사용해야 할 일이 생기게 되어 어떻게 사용할까 고민이 되었습니다.

React 의 기본기에 충실하기 위해 상태관리 라이브러리를 사용하지 않기로 하였기 때문에 같은 depth 에 어떻게 데이터를 넘겨줄지 고민이 되었습니다.

useContext 로 props 전달 없이 전역에서 전달 가능한 React hook API 를 알게 되었고 바로 저희 프로젝트에 적용을 하였습니다.

사용법

createContext 메서드를 사용해 context를 생성합니다.
생성된 context를 가지고 context provider로 컴포넌트 트리를 감쌉니다.
value prop을 사용해 context provider에 원하는 값을 입력합니다.
context consumer를 통해 필요한 컴포넌트에서 그 값을 불러옵니다.

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

interface MyContextType {
  message: string;
  setMessage: React.Dispatch<React.SetStateAction<string>>;
  color: string;
  setColor: React.Dispatch<React.SetStateAction<string>>;
  sender: string;
  setSender: React.Dispatch<React.SetStateAction<string>>;
}

const MessageContext = createContext<MyContextType>({ // 1️⃣ context 생성
  message: '',
  setMessage: () => {},
  color: '',
  setColor: () => {},
  sender: '',
  setSender: () => {}
});

const MessageProvider: React.FC<{ children: React.ReactNode }> = ({
  children
}) => {
  const [message, setMessage] = useState<string>('');
  const [color, setColor] = useState<string>('');
  const [sender, setSender] = useState<string>('');
  return (
    <MessageContext.Provider
      value={{ message, setMessage, color, setColor, sender, setSender }}
    > // 2️⃣ context provider로 컴포넌트 트리 감싸기
    // 3️⃣ value prop으로 원하는 값 입력
      {children}
    </MessageContext.Provider>
  );
};

export { MessageProvider, MessageContext };