Context API
오늘은 채용관련 사전과제 위주로 풀었다.
과제 중 Context API 를 사용하려는 데, Context API 를 어떤 기준에 의해서 사용하는게 좋을 지를 고민해보다가
velopert 님이 가장 최근에 쓰신 글을 읽었다.
사실 이전에 읽은적이 있던 typescript + Context API + useReducer 를 사용하는 방법을 찾으려고 구글링했다가 최신 글로 작성하신 게 있어서 읽게됐다.
이전 글에서는 하나의 Context API 를 사용하여 value 와 actions 를 따로 쓰는 곳에서 모두 리렌더링이 일어나는 것을 막기 위해 두 개의 Provider 로 나누어서 hooks 를 만든다는 발상이 신기했었다. 이전 글과 최근 글의 차이점은 useReducer 의 dispatch 를 Context 에 포함시키는게 아니라 별도의 처리 함수를 만들어서 해당 객체를 actions 라는 변수에 담아 전달하는 방식을 소개하고 있는데, reducer 를 따로 분리해서 사용할 필요가 없다 정도로 이해가 된다.
useReducer 를 왜 써야하나? 라는 생각을 했던 적이 있는데 하나의 컴포넌트가 다양한 상태를 갖고있고, 어느 action 이 여러 개의 상태를 바꿔야 한다면 이만큼 편리한 것도 없다고 생각한다. Context 의 상태가 단순하다면 useReducer 를 사용할 필요 없이 소개된대로 actions 를 구성해도 좋겠다는 생각을 했다.
Context API 를 처음 접하면 마냥 어렵게 느껴지기 마련이고, Props drilling 과 비교했을 때 어느 기준으로 사용해야 되는가? 에 대해서 궁금했던 적이 있는데 인상깊은 블로그 문구가 있어서 첨부.
Context 란?
Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데요, 꼭 전역적일 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋습니다. - velopert 님 글
전역 상태관리 라이브러리를 언제써야 하나? 부분에서, 다양한 전역상태 관리 라이브러리를 언급함과 함께 각각의 특징을 알 수있어서도 좋았다. 지금은 사용할 Context 를 각각 만들어주고 사용해야하지만 recoil 등은 hook 으로 간편하게 사용할 수 있다는점. redux 는 실제 의존하는 값이 바뀔 때만 리렌더링이 되게 해준다는점 (context 는 이를 위해 각각의 상태를 만들어 줘야 하지만 이를 생략할 수 있음)
바닐라 JS 로 SPA 를 만들 수 있지만 간편하게 React 를 사용하는 것 처럼, 전역 상태관리를 Context API 로 대응할 수 있지만 이를 간편하게 하기 위해 라이브러리를 사용한다는 점을 생각해 보았을 때 Context API 랑 좀 더 진하게 놀아보고 사용해봐도 괜찮겠다는 생각을 했다.
