TIL - Recoil 기초 튜토리얼

개발 2022. 3. 18. 01:23

학습 목표

Recoil 기본 동작을 이해하기 위한 간단한 App 코딩해보기

Recoil State 추가 및 외부 컴포넌트와 상태 공유

atom: 전역관리 상태값 정의
useRecoilState: atom에 등록된 상태값과 set 함수 반환
useReocilValue: atom에 등록된 상태값 접근

selector를 사용한 atom 데이터 가공

selector는 atom 상태값에 접근하여 렌더링 하기 전 로직을 추가 할 수 있으며 
미들웨어 처럼 비동기 로직 또한 selector에서 처리 가능하다.
단, selector는 write 할 수 없기 때문에 useRecoilValue로만 접근 가능하다.

GitHub - cslim0527/recoil_practice: recoil practice

recoil practice. Contribute to cslim0527/recoil_practice development by creating an account on GitHub.

github.com

Recoil이 요즘 많이 쓰이는 이유가 Redux와 비교해서 config 단계가 엄청 간단하고

사용방법이 React와 비슷한 패러다임으로 쓸 수 있어서 쉽게 전역상태관리 할 수 있도록 도와주기 때문에

무척이나 편하고 친숙해 보인다.

간단한 프로젝트였지만 selector를 사용해서 미들웨어 처럼 상태값의 추가 로직을 더하거나

비동기 동작처리가 가능하다는 점이 굉장히 유익했고 공식문서를 통해 그 뒤에 나오는 기능에 대해 더 공부 해봐야겠다.

앞으로 4월즈음 담당하게 될 프로젝트에 react-query와 recoil을 쓰면 개발하기도 좋고 높은 사용자 경험을 제공하는 프로젝트를 만들 수 있을거 같다..!