React - Context API

Context API

서로 다른 컴포넌트에서 props나 children으로 데이터를 전달하기에는 많은 작업이 필요합니다. React는 전역적으로 데이터 전달을 용이하게 할 수 있도록 Context 라는 것을 지원합니다. context를 이용하면 props를 이용하지 않고 데이터를 전달합니다.

Context를 사용할 때는 주의할 점이 있습니다!!
전역적으로 필요한 데이터인지?
전역적으로 불필요한 데이터까지 context를 이용하면 컴포넌트 재사용이 힘들어
집니다!!

Context API

React context에서 제공해주는 API가 있습니다.

• React.createContext
• Context.Provider
• Context.Consumer (useContext)
  (React 16.8 업데이트로 함수형 컴포넌트 useContext로 편하게 사용!)
• Class.contextType
• Context.displayName

제가 직접 사용해본 api로는 3가지 뿐이지만 프로젝트를 진행함에 있어 문제없이 진행하였습니다.

• createContext
• Provider
• useContext

1. React.createContext

context를 객체를 생성하기 위한 api입니다.
defaultValue는 Provider에서 값을 못 찾을 때 사용합니다.

const MyContext = React.createContext(defaultValue);

실제 사용 예시

import React, {createContext} from 'react';
const ModalContext = createContext(
	(status: ModalStatusType, description: string) => {},
);

2. Provider

앱단의 상위에서 Provider를 선언해주면 context를 사용하고 있는 곳에서
데이터가 변화되는 값을 인지합니다. Provider로 전달해주는 데이터는
문자열, 숫자는 기본이고 함수까지 전달할 수 있습니다.
아래 예시는 context로 함수를 전달하여 전역적으로 modal을 사용하기 위한 Provider 세티입니다.

• createContext : context 객체 생성
• Provider : context 전역적으로 사용하는 곳 세팅

// src/context/modal/index.tsx

import React, {createContext,PropsWithChildren} from 'react';
const ModalContext = createContext(
	(status: ModalStatusType, description: string) => {},
);

function ModalProvider({ children }:PropsWithChildren<any>){
  const [modalList, setModalList] = useState([]);
  
  const handleModalVisibleClick = useCallback((status: ToastStatusType, description: string) => {
    let modalProperties = null;
    switch (status) {
      case 'info':
        modalProperties = {
          id: modalList.length + 1,
          description,
          status,
        };
        break;
      case 'error':
        modalProperties = {
          id: modalList.length + 1,
          description,
          status,
        };
        break;
      default:
        return 'info';
    }
    return setModalList([...modalList, modalProperties]);},
		[modalList],
	);
  
  
	return (
		<ModalContext.Provider value={handleModalVisibleClick}>
			{modalList && <Modal modalList={modalList} setList={setModalList} />}
			{children}
		</ModalContext.Provider>
	);
}

export { ModalContext, ModalProvider };

// App.tsx
.
.
.
const root = ReactDOM.createRoot(
	document.getElementById('root') as HTMLElement,
);

root.render(
	<React.StrictMode>
			<ThemeProvider theme={theme}>
				<ModalProvider> // <---- Provider 선언
					<GlobalStyle />
					<BrowserRouter>
						<Routes>
							<Route path="/*" element={<App />} />
						</Routes>
					</BrowserRouter>
				</ModalProvider>
			</ThemeProvider>
	</React.StrictMode>,
);

useContext

실제 사용하는 컴포넌트 내에서 context를 사용하기 위한 방법입니다.
React 업데이트로 함수형 컴포넌트에서는 useContext로 보다 쉽게 context를 사용 할 수 있습니다.

import React, { useContext } from 'react';
import { ModalContext } from '../../../contexts/Modal';

function Login(){
  const handleModalVisibleClick = useContext(ModalContext);
  
	return (
      <button onClick={()=>{handleModalVisibleClick('error','테스트 에러 문구')}}></button>
      <button onClick={()=>{handleModalVisibleClick('info','테스트 정보 문구')}}></button>
    )
}