Skip to content

Latest commit

 

History

History
20 lines (12 loc) · 1.37 KB

File metadata and controls

20 lines (12 loc) · 1.37 KB

Provider 를 이용한 데이터 관리

앱 내의 여러 컴포넌트들이 데이터를 사용할 수 있게 해야 하는 상황이 종종 있습니다. props 를 통해서 데이터를 전달하는 방식이 있지만, 번거로우며 Prop Drilling 이라는 안티 패턴이 되어 아주 멀리 있는 컴포넌트 트리까지 props 를 내려주게 됩니다.

Prop Drilling 이 발생하면 해당 props 에 의존하는 컴포넌트들을 리펙토링하기 매우 어려워지며, 이 데이터가 어디에서 온 데이터인지도 알기 힘듭니다.

Prodiver 패턴은 Context API 를 사용해 컴포넌트 트리를 통해 데이터를 관리하도록 해주어 Prop Drilling 에 대한 효과적인 해법이 됩니다.

장점과 단점은?

장점

  • 다수의 컴포넌트에 데이터를 쉽게 전달할 수 있습니다.
  • 리펙토링 중 개발자가 실수할 확률을 줄여줍니다.
  • Prop Drilling 을 하지 않아도 됩니다.

단점

  • 컨텍스트를 참조하는 모든 컴포넌트가 컨텍스트 변경시마다 모두 리렌더링되기 때문에 성능 이슈가 발생할 수 있습니다. 소규모 앱에서는 큰 문제가 되지 않지만, 큰 규모의 앱에서는 성능에 악영향을 끼칠 수 있습니다. -> 불필요하게 렌더링되는 것을 막기 위해 여러 Provider 로 쪼갤 필요가 있습니다.