React context를 활용하여 modal state 관리하기

modal 창 달기

• modal 창 달기 시 컴포넌트가 여기저기 분리가 되어 있다.
  • menu icon에 있는 state에 따라 modal창이 켜질지 말지 여부가 정해져 있다…
  • modal창은 header영역의 색도 같이 변해야 한다. 때문에 또한 어떤 페이지에서도 동작해야 하기 때문에 위치해야 하는 컴포넌트는 app.tsx가 되야 될거같다.

방법

• 이번 프로젝트 중 modal창 toggle 기능을 만들어야 했다.
• modal창을 켰을 때
  • menu icon 버튼 디자인 변경
  • header background color 변경
  • contents component 대신 modal창 켜져야함

다양한 컴포넌트에서 변경이 일어나기 때문에 modal toggle state를 전역적으로 관리하기로 변경하였다.

그래서 해결방법으로 context api를 사용할 것이다

사용방법

1. context 생성하기
2. context provider component만들기
3. context dispatch, state hooks 만들기

Dispatch 와 State provider 분리하기

• 같이 관리 할경우 불필요한 리렌더링이 발생한다.
• 현재 Modal창을 관리할때 dispatch 함수는 리렌더링이 일어나지 않아도 되기 때문에 state만 렌더링이 일어나서 변경 될 수 있게 바꾸어준다.

예시코드

import { createContext, ReactNode, Dispatch, SetStateAction, useState, useContext } from 'react';

interface ModalContextProps {
  children: ReactNode;
}

const ModalStateContext = createContext<boolean>(false);
const ModalDispatchContext = createContext<Dispatch<SetStateAction<boolean>>>(() => null);

export function ModalContext({ children }: ModalContextProps) {
  const [isOpenModal, setIsOpenModal] = useState(false);

  return (
    <ModalDispatchContext.Provider value={setIsOpenModal}>
      <ModalStateContext.Provider value={isOpenModal}>{children}</ModalStateContext.Provider>
    </ModalDispatchContext.Provider>
  );
}

export function useModalState() {
  const state = useContext(ModalStateContext);

  return state;
}

export function useModalDispatch() {
  const dispatch = useContext(ModalDispatchContext);

  return dispatch;
}

reference

https://react.vlpt.us/using-typescript/04-ts-context.html

4. TypeScript 와 Context API 활용하기 · GitBook