Context API에 대해

React v16부터 사용가능한 React API로써, 일반적으로 props를 통해 부모요소에서 자식요소로 단방향으로 props를 전달하지만, 이럴 경우 전달하는 props는 많은 구성 요소를 통해 전달한다. Context를 사용해 부모요소에서 필요한 하위 트리의 구성요소로 정보를 전달 할 수 있다.

장점

• Built-in
• 러닝 커브가 낮다. (react API)
• 전역 상태가 아닌, single state tree에서 유용하다.
• props drilling을 막아준다.
  • 중첩된 여러 계층의 컴포넌트에 props를 전달해주는 것

 

단점

• 컴포넌트 재사용이 어렵다.
• 렌더링 최적화가 힘들다.
  • props의 변화를 감지해서 react는 리렌더링이 일어나는데, context를 사용하면 props가 변하지 않더라도 리렌더링이 이루어질 수 있다. 이로 인해 디버깅도 어려워지는 단점이 명확하다.
  • 해당 context를 사용하는 모든 컴포넌트에서 재렌더링이 일어나게 된다.

반응형