디자인 패턴 (3) Provider 패턴

본 글은 하단의 링크의 글들을 공부하며 필사한 글임.

 

여러 컴포넌트로 쪼개서 개발을 하다 보면 상위 컴포넌트에서 쓰이는 데이터를 하위 컴포넌트로 전달해야 할 일이 생긴다.
보통이라면 props를 통해 전달해야겠지만 컴포넌트 간의 거리가 멀어질 수록 이 방법은 번거롭고 비용이 발생한다. 추가로 리팩토링 또한 어려워진다.

데이터를 필요로 하지 않는 컴포넌트들은 제외하고 데이터를 필요로 하는 컴포넌트가 데이터에 접근할 수 있는 방법이 필요하다.

Provider패턴을 통해 위와 같은 방법을 구현할 수 있다.

Provider

1. 가장 먼저 모든 컴포넌트를 Provider로 감싼다. data를 필요로 하는 최상위 컴포넌트를 감싸면 된다. Provider는 Context객체를 제공하고, 리액트에서 제공하는 createContet메서드를 통해 Context객체를 만들 수 있다.

2. Provider의 하위 컴포넌트에게 내려줄 데이터를 value라는 prop으로 받아 자식 컴포넌트들이 value prop에 접근할 수 있도록 한다.

3. 해당 데이터를 필요로 하는 컴포넌트에선 useContext훅을 통해 data에 접근해 사용하도록 한다.

알아본 Provider패턴을 통해 전역 데이터를 공유하기에 유용하다. 

---

예시

export const ThemeContext = React.createContext()

const themes = {
  light: {
    background: '#fff',
    color: '#000',
  },
  dark: {
    background: '#171717',
    color: '#fff',
  },
}

export default function App() {
  const [theme, setTheme] = useState('dark')

  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }

  const providerValue = {
    theme: themes[theme],
    toggleTheme,
  }

  return (
    <div className={`App theme-${theme}`}>
      <ThemeContext.Provider value={providerValue}>
        <Toggle />
        <List />
      </ThemeContext.Provider>
    </div>
  )
}

 

해당 코드는 스위치를 토글해 라이트모드와 다크모드를 전환하도록 한다. 모드에 따라 글씨와 배경의 색상이 변해야한다.
테마의 값들을 포함한 themes를 Toggle과 List 컴포넌트로 직접 내리기보단 Context를 사용한다.

Toggle 컴포넌트에선 다음과 같이 접근한다.

import React, { useContext } from 'react'
import { ThemeContext } from './App'

export default function Toggle() {
  const theme = useContext(ThemeContext)
  //useContext훅을 통해 ThemeContext 객체에 접근 가능
  
  return (
    <label className="switch">
      <input type="checkbox" onClick={theme.toggleTheme} />
      <span className="slider round" />
    </label>
  )
}

Context의 toggleTheme 메소드를 직접 호출해 dark, light모드를 전환함.

List 컴포넌트 내부의 ListComponet에서는 Context 객체에 있는 theme를 통해 Toggle을 통해 변환된 상태에 맞는 스타일 값들을 통해 UI를 보여줄 수 있다.

---

컨텍스트 반환 Hooks

컴포넌트에서 useContext를 import를 하는 것이 아닌 필요로 하는 컨텍스트를 직접 반환하는 훅을 구현 가능하다.

function useThemeContext() {
  const theme = useContext(ThemeContext)
  return theme
}

다음과 같이 Theme컨텍스트를 반환하는  훅을 만들고, 컴포넌트들을 HOC를 통해 간단하게 사용하도록 한다.

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark')

  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }

  const providerValue = {
    theme: themes[theme],
    toggleTheme,
  }

  return (
    <ThemeContext.Provider value={providerValue}>
      {children}
    </ThemeContext.Provider>
  )
}

export default function App() {
  return (
    <div className={`App theme-${theme}`}>
      <ThemeProvider>
        <Toggle />
        <List />
      </ThemeProvider>
    </div>
  )
}

하위 컴포넌트 중 ThemeContext의 컨텍스트에 접근하기 위해선 useThemeContext 훅을 사용해 접근한다. 

이 경우에 각 다른 컨텍스트를 위한 훅을 만들어 컴포넌트의 렌더 로직과 Provider로직을 분리가 가능하다.

---

 장점 

1. 컴포넌트 트리의 각 노드에 데이터 전달 없이 다수의 컴포넌트에 데이터를 전달할 수 있다.
2. 리팩토링시 실수를 줄여준다. (기존에는 prop의 이름 변경 시 모두 변경해야 했음)
3. prop-drilling을 피할 수 있다. 필요한 컴포넌트에서만 Context를 사용해 prop을 받기에.

 단점 

1. Provider 패턴을 무분별하게 사용시, 성능이슈 발생 가능성이 있다. (컨텍스트를 참조하는 모든 컴포넌트는 컨텍스트 변경시 마다 리렌더링 됨.

https://patterns-dev-kr.github.io/design-patterns/introduction/

Design Pattern 소개