Calandar 컴포넌트에 Provider 패턴 적용기

[jinyoung234]

Provider Pattern을 도입하게 된 배경

현재 캘린더 컴포넌트와 컴포넌트 내 트리 구조 입니다. 현재의 Calendar 컴포넌트 에서는 DayListItem 까지 접근하기 위해 총 3단계를 거칩니다.

여기서 CalendarSwiper와 DayList에 대해 주목해볼 필요가 있습니다.

현재 Swiper 컴포넌트에는 전체 버튼을 눌렀는지 확인 여부의 boolean 값인 isTotal과 전체 버튼을 누를 때 isTotal의 상태를 변경하기 위한 setIsTotal, 공연 정보 메인 데이터를 요청할 때 필요한 변수인 performanceParams를 필요로 하며, DayList에는 달 별 일 갯수를 반환하는 배열인 Calandar 변수를 필요로 합니다.

CalendarSwiper.tsx

import { PerformancePayload } from '@queries'
import { SetStateAction } from 'react'
import DayList from './DayList'

interface CalendarSwiperProps {
  calandar: unknown[]
  currentDay: number
  isSunday: (day: number) => boolean
  setCurrentDay: (value: SetStateAction<number>) => void
  getDay: (day: number) => number
  isTotal: boolean
  setIsTotal: (value: SetStateAction<boolean>) => void
  setPerformancePayload: (value: SetStateAction<PerformancePayload>) => void
}

const CalendarSwiper = ({
  calandar,
  currentDay,
  isSunday,
  setCurrentDay,
  getDay,
  isTotal,
  setIsTotal,
  setPerformancePayload,
}: CalendarSwiperProps) => {
  return (
    <div className="no-scrollbar flex h-[57px] w-[100%] resize-none overflow-x-scroll pl-[58px]">
      <div>
        <button
          onClick={() => {
            setPerformancePayload((prev) => ({
              ...prev,
              day: '',
            }))
            setIsTotal(true)
          }}
          className={`b-0 absolute left-0 h-[57px] bg-gray-900 px-[16px] text-[16px] font-bold  ${
            isTotal
              ? 'h-[57px] border-b-[3px] border-b-green-light pt-[1px] text-green-light'
              : 'border-b-[2px] border-b-gray-700 text-gray-400'
          }`}
        >
          전체
        </button>
      </div>
      <DayList
        isTotal={isTotal}
        setIsTotal={setIsTotal}
        calandar={calandar}
        currentDay={currentDay}
        isSunday={isSunday}
        setCurrentDay={setCurrentDay}
        getDay={getDay}
        setPerformancePayload={setPerformancePayload}
      />
    </div>
  )
}

export default CalendarSwiper

DayList.tsx

import { PerformancePayload } from '@queries'
import { SetStateAction } from 'react'
import DayListItem from './DayListItem'

interface DayListProps {
  calandar: unknown[]
  currentDay: number
  isSunday: (day: number) => boolean
  setCurrentDay: (value: SetStateAction<number>) => void
  getDay: (day: number) => number
  isTotal: boolean
  setIsTotal: (value: SetStateAction<boolean>) => void
  setPerformancePayload: (value: SetStateAction<PerformancePayload>) => void
}

const DayList = ({
  isTotal,
  calandar,
  currentDay,
  isSunday,
  setCurrentDay,
  getDay,
  setIsTotal,
  setPerformancePayload,
}: DayListProps) => {
  return (
    <>
      {calandar.map((_, day) => (
        <DayListItem
          isTotal={isTotal}
          key={day}
          currentDay={currentDay}
          isSunday={isSunday}
          setCurrentDay={setCurrentDay}
          getDay={getDay}
          day={day}
          setIsTotal={setIsTotal}
          setPerformancePayload={setPerformancePayload}
        />
      ))}
    </>
  )
}

export default DayList

하지만 두 컴포넌트 에서 불필요한 props 들이 많이 존재하여, 다음 그림과 같이 props drilling 현상이 발생하고 있었습니다.

이는, 만약 props 들에 대해 변경사항이 생기거나 문제가 발생하게 되면 props 데이터를 사용하지 않는 컴포넌트 들에 대해서도 변경이 발생할 수 있기 때문에 (ex) 변수명 변경) 좋지 않다고 생각했고 Provider 패턴을 도입하여야 겠다고 생각했습니다.

Provider Pattern

design-provider01.mp4

Props drilling에 의존하지 않고 직접 접근하기 위해 Context 객체를 이용하여 각 레이어에 직접 데이터를 주지 않고도 여러 컴포넌트들에게 데이터에 접근하도록 하기 위한 기법

Provider 컴포넌트를 만든 후 Provider에서 제공하는 데이터를 필요로 하는 컴포넌트는 Provider 컴포넌트를 구독하는 형태의 패턴 입니다.

즉, ContextAPI를 활용하여 Provider 컴포넌트를 구독하는 하위 컴포넌트들은 필요한 데이터만 가져오기 때문에 컴포넌트 간 props drilling 현상을 방지 할 수 있습니다.

Calendar.tsx

import { PerformanceParams } from '@queries'
import { createContext, Dispatch, SetStateAction } from 'react'
import CalandarSlider from './CalendarSlider'
import CalandarSwiper from './CalendarSwiper'

export interface CalendarProps {
  isTotal: boolean // 전체 버튼 클릭 유무 확인 boolean
  setIsTotal: Dispatch<SetStateAction<boolean>> // isTotal 값을 변경해주는 setState
  handleSetMonth: (monthIncrement: number) => void // CalendarSlider에서 버튼 클릭 시 달이 변경 되도록 하는 함수
  handleIsSunday: (day: number) => boolean // 해당 요일이 일요일인지 확인하는 함수
  currentDay: number // 현재 클릭한 날짜에 대한 변수
  setCurrentDay: Dispatch<SetStateAction<number>> // currentDay를 변경하기 위한 setState
  calandar: number[] // 현재 달에 대한 1일 ~ 달의 마지막 일 까지의 배열을 만드는 변수
  performanceParams: PerformanceParams // 공연 정보 메인 api를 호출 할 때 필요한 매개변수 데이터
  setPerformanceParams: Dispatch<SetStateAction<PerformanceParams>> // performanceParams에 대한 setState
}

export const CalandarCtx = createContext({})

const Calendar = ({
  handleIsSunday,
  currentDay,
  setCurrentDay,
  calandar,
  handleSetMonth,
  isTotal,
  setIsTotal,
  setPerformanceParams,
  performanceParams,
}: CalendarProps) => {
  return (
    <CalandarCtx.Provider
      value={{
        calandar,
        currentDay,
        handleIsSunday,
        setCurrentDay,
        isTotal,
        setIsTotal,
        setPerformanceParams,
      }}
    >
      <div className="relative flex flex-col bg-gray-900">
        <div className="flex w-full justify-between pt-[30px] pb-[6px]">
          <CalandarSlider
            performanceParams={performanceParams}
            setPerformanceParams={setPerformanceParams}
            handleSetMonth={handleSetMonth}
            setCurrentDay={setCurrentDay}
            currentDay={currentDay}
          />
        </div>
        <CalandarSwiper />
      </div>
    </CalandarCtx.Provider>
  )
}

export default Calendar

우선 createContext 메서드를 호출 하여 Calendar 컨텍스트를 생성합니다.

컨텍스트가 제공하는 Provider를 활용하여 Provider 내 존재하는 value prop을 통해 Calendar가 CalendarSwiper에 주었던 데이터들을 등록합니다.

DayList.tsx

import { useContext } from 'react'
import { CalandarCtx, CalendarProps } from '.'
import DayListItem from './DayListItem'

const DayList = () => {
  const { calandar } = useContext(CalandarCtx) as Pick<
    CalendarProps,
    'calandar'
  >
  return (
    <>
      {calandar.map((_, day) => (
        <DayListItem key={day} day={day + 1} />
      ))}
    </>
  )
}

export default DayList

DayList 컴포넌트는 Calendar 컴포넌트에서 등록한 데이터 중 calandar 변수만 필요로 하기 때문에 다음과 같이 useContext hook을 통해 가져올 수 있습니다.

Provider 패턴을 통해 이제 컴포넌트 들이 실제 사용하고 있는 데이터들을 구별하기 쉬워졌고, 더는 변경에 대해 전보다 걱정하지 않아도 되었습니다.

물론 Provider 패턴 도입을 통해 리 렌더링 이슈가 발생하기 때문에 고민을 해보았고, 리 렌더링 보단 가독성을 생각 하기로 했습니다.