디자인 패턴 - Provider 패턴

Provider 패턴

• props drilling에 의존하지 않고 컴포넌트가 직접 데이터에 접근할 수 있는 방법
• 데이터를 사용할 컴포넌트를 Provider로 감싼다. Provider는 HOC(고차 컴포넌트)로 Context라는 객체를 제공한다. React가 제공하는 createContext 메소드를 활용해 Context 객체를 만들어낼 수 있다. 
• Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
• Provider 컴포넌트는 value라는 prop으로 하위 컴포넌트들에 내려줄 데이터를 받는다. 이 컴포넌트의 모든 자식 컴포넌트들은 해당 provider를 통해 value props에 접근할 수 있다. 

const DataContext = React.createContext()

function App() {
  const data = { ... }

  return (
    <div>
      <DataContext.Provider value={data}>
        <SideBar />
        <Content />
      </DataContext.Provider>
    </div>
  )
}

 

• data가 필요한 컴포넌트만 useContext hook을 활용해 data에 접근하면 된다. 

const SideBar = () => <List />
const List = () => <ListItem />
const Content = () => <div><Header /><Block /></div>

function ListItem() {
  const { data } = React.useContext(DataContext);
  return <span>{data.listItem}</span>;
}

function Text() {
  const { data } = React.useContext(DataContext);
  return <h1>{data.text}</h1>;
}

function Header() {
  const { data } = React.useContext(DataContext);
  return <div>{data.title}</div>;
}

 

언제 Provider 패턴을 사용할까? 

• 전역 데이터 공유
• case study: dark mode theme, styled-components의 ThemeProvider

 

 

장점

• 컴포넌트 트리의 각 노드에 데이터를 전달하지 않아도 다수의 컴포넌트에 데이터를 전달할 수 있다.

 

단점

• Provider 패턴을 과도하게 사용할 경우 특정 상황에서 성능 이슈가 발생할 수 있다. 컨텍스트를 참조하는 모든 컴포넌트는 컨텍스트 변경시마다 모두 리렌더링된다.
• 컴포넌트 쓰지 않는 값의 업데이트로 인해 불필요하게 렌더링되는것을 막기 위해서는 여러 Provider로 쪼갤 필요가 있다.