Provider pattern

EnaZero·2024년 1월 26일

Provider Pattern React flutter 프로바이더 프로바이더 패턴

[Flutter & Flask] 모바일 앱 개발

목록 보기

3/4

patterns.dev의 내용을 보고 추가적인 개념을 덧붙여 정리한 글입니다.

앱 내의 여러 컴포넌트들이 데이터를 사용해야 할 때
props를 통해서 데이터를 전달하는 방식은 앱 내의 모든 컴포넌트들이 데이터에 접근해야 하는 경우 번거롭다.

prop drilling

아주 멀리있는 컴포넌트 트리까지 props를 내려주는 경우,
prop에 의존되는 컴포넌트들을 추후에 리팩토링하기 힘들어지고
어떤 데이터가 어디서부터 전해져오는지 알기 어렵다.

데이터가 필요하지 않는 컴포넌트는 props를 받지 않도록 수정하는것이 좋다.
그러기 위해선 prop drilling에 의존하지 않고 컴포넌트가 직접 데이터에 접근할 수 있는 방법이 요구된다.

이러한 경우에 provider pattern이 유용하다.

provider pattern의 장점

provider 패턴을 이용하면 각 레이어에 직접 데이터를 주지 않고도 여러 컴포넌트들에게 데이터에 접근할 수 있도록 할 수 있다.
data를 필요로 하지 않는 컴포넌트들은 data를 prop을 받지 않게 된다
prop drilling이 필요 없어지고, 리팩토링이 수월해진다
앱의 데이터 흐름을 알기 쉬워진다
전역 데이터를 공유하기에 용이하다

단점

Provider 패턴을 과하게 사용할 경우 특정 상황에서 성능 이슈가 발생할 수 있다
컨텍스트를 참조하는 모든 컴포넌트는 컨텍스트 변경시마다 모두 리렌더링 된다
ex) Increment버튼이 Button 컴포넌트 안에 있고, Reset버튼은 Reset컴포넌트 안에 있다. Increment버튼을 누르면 카운트만 증가되는 것이 아니라 Reset컴포넌트 내의 date도 리렌더링 된다. (Reset컴포넌트는 useCountContext를 사용하고 있기 때문에 리렌더링 된다)
위의 경우를 방지하기 위해 여러 Provider로 쪼갤 필요가 있다.

적용

보통 UI테마를 여러 컴포넌트들이 공유해 사용하기 위해 쓴다.

동작 개념

모든 컴포넌트를 Provider로 감싼다. Provider는 HOC로 Context객체를 제공한다. - React가 제공하는 createContext메서드를 활용해서 Context 객체를 만들어낼 수 있다.
Provider 컴포넌트는 value라는 prop으로 하위 컴포넌트들에 내려줄 데이터를 받는다. 이 컴포넌트의 모든 자식 컴포넌트들은 해당 provider를 통해 value prop에 접근할 수 있다. - 아로 인해 각 컴포넌트들에 직접 data prop을 일일히 넘기지 않아도 된다.
각 컴포넌트들은 useContext훅을 사용하여 data에 접근할 수 있다. - 이 훅은 data와 연관된 DataContext를 받아 data를 읽고 쓸 수 있는 context 객체를 제공한다.

Hook

Hook 라이브러리는 flutter의 StatelessWidget과 StatefulWidget을 대신하는 HookWidget을 제공하는 라이브러리다.

HookWidget을 사용하면 해당 위젯이 가진 Hook함수를 사용할 수 있다.

자주 사용하는 로직을 미리 정의하여 필요할 때 꺼내 쓰도록 하고, 이렇게 미리 정의한 로직패턴을 Hook이라고 부른다.

Hook을 사용할 시 한줄의 코드로 기존보다 더 많은 정보를 추상화해서 전달할 수 있다.

위의 <동작 개념> 에서 제시하던 예시에 대한 내용을 이어나가면, 각 컴포넌트에서 useContext를 직접 import하는 대신 필요로 하는 컨텍스트를 직접 반환하는 훅을 구현할 수 있다.
-> 훅이 유효하게 사용되는지 검증하기 위해 컨텍스트가 잘못된 값일 때 예외를 발생시키도록 구현한다.

function useThemeContext() {
  const theme = useContext(ThemeContext)
  if (!theme) {
    throw new Error('useThemeContext must be used within ThemeProvider')
  }
  return theme
}