Context API

posinity·2023년 3월 27일
0

React

목록 보기
42/58

Context 란?

리액트 컴포넌트에서 props가 아닌 방식으로 컴포넌트간에 값을 전달하는 방법으로, 전역적(global)으로 필요한 값을 다룰 때 사용하지만 꼭 전역적일 필요는 없다.
Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있습니다.
React에서 Context를 사용하기 위해서는 Context API를 사용해야 하며, Context의 Provider와 Consumer를 사용해야 합니다.

전역 상태 관리 라이브러리는 언제 써야 할까?

단순히 전역적인 상태를 관리하기 위함이라면 전역 상태 관리 라이브러리를 사용할 이유는 없다.

단, "상태 관리 라이브러리"와 Context는 완전히 별개의 개념이다. Context는 전역 상태 관리를 할 수 있는 수단일 뿐이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고, 효율적으로 할 수 있게 해주는 기능들을 제공해주는 도구입니다.

예를 들어, Redux의 경우에는 액션과 리듀서라는 개념을 사용하여 상태 업데이트 로직을 컴포넌트 밖으로 분리 할 수 있게 해주며, 상태가 업데이트 될 때 실제로 의존하는 값이 바뀔 때만 컴포넌트가 리렌더링 되도록 최적화를 해줍니다. 만약 Context를 쓴다면, 각기 다른 상태마다 새롭게 Context를 만들어주어야 하는데, 이 과정을 생략할 수 있기에 편리하죠.

MobX의 경우엔 Redux와 마찬가지로 상태 업데이트 로직을 컴포넌트 밖으로 분리할 수 있게 해주고, 함수형 리액티브 프로그래밍 방식을 도입하여 mutable한 상태가 리액트에서도 잘 보여지게 해주고 상태 업데이트 로직을 더욱 편하게 작성할 수 있게 해주며 최적화도 잘 해줍니다.

Recoil, Jotai, Zustand의 경우엔 Context를 일일이 만드는 과정을 생략하고 Hook 기반으로 아주 편하게 전역 상태 관리를 할 수 있게 해주죠. 최적화 기능 또한 덤으로 딸려오고요.

전역 상태 라이브러리는 결국 상태 관리를 조금 더 쉽게 하기 위해서 사용하는 것이며 취향에 따라 선택해서 사용하면 되는 것입니다.

참고자료

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법
[React] Context API

profile
문제를 해결하고 가치를 제공합니다

0개의 댓글