[React] state management section ( Recoil 편 )

목적

• 스테이트 관리를 하기 위한것
• 스테이트 관리를 왜 하느냐?
• props drilling 을 방지 하기위한 것

 

props drilling 이란?

 

• 예를 들어 전체 테마를 변경하기 위한 global component가 최상위 app 혹은 index 파일에 있다.
• 전체 테마를 변경하지만 
• index 아래 -> app 아래 -> store 아래 -> 장바구니 아래 -> 특이한 버튼 
• 특이한 버튼의 props하나를 변경시켜주기 위해
• index, app, store, 장바구니 전부다 props를 생성하여 자식 컴포넌트에 물려 주어야한다.

 

• 거기다가 만약 타입스크립트까지 사용한다면?
• 변경 점이 없는 중간 단계의 컴포넌트들에 쓸모도없는 interface까지 만들어주어서 props를 보내주어야한다.

 

• 또한, props명 혹은 데이터를 하나라도 변경한다면 모든 props의 데이터를 변경해주어야하는데
• 이러한 것을 방지하기위해 작성된 것이 Recoil이다.

 

Recoil 이란

https://recoiljs.org/ko/docs/introduction/getting-started

recoil 공식문서 참조

설치 방법

npm i recoil 

 

• Root Recoil을 지정해준다. 보통 index 파일에 사용함 
• RecoilRoot 를 import 해와서 Provider를 감싸주자

 

• useRecoilValue(state)
  • Recoul 즉 state를 받을 곳에 useRecoil hook을 사용 useRecoil 이 사용된 곳은 setRecoul이 될때 자동으로 리렌더링 된다.

 

• useSetRecoilState(state)
  • Recoil state 값을 업데이트 하기위한 setter 함수, 비동기로 사용 될 수 있는 setter 함수를 리턴
  • 새로운값, 이전 값 등을 인수로 받는 updater 함수를 넘겨줌

 

• Recoil은 보통 2단계 이하로 내려갈때 만들자