[Recoil]
<STUDY>
❓ Recoil : 리액트 상태 관리 라이브러리
1. recoil 설치하기
npm install recoil
or
yarn add recoil
2. RecoilRoot로 컴포넌트 감싸기
- <Components /> : 상태를 관리하고 사용할 상위 컴포넌트
3. Atom 생성하기
- src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다.
- 파일 이름은 임의로 정하면 된다.
- key : state를 식별할 id (유일해야 함)
- default : 초기 값
❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다.
❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다.
3. 컴포넌트에서 state 사용하기
💡 useRecoilState()
- useState처럼 state 값과 state를 업데이트 할 수 있는 함수를 불러올 수 있다.
💡 useRecoilValue()
- state 불러오기 : 업데이트가 불가하고 현재 state를 사용하는 것만 가능하다.
💡 useSetRecoilState()
- useState의 setState 함수처럼 state를 업데이트 할 수 있다. (값을 사용할 수 는 없음)
** state와 함수의 이름은 임의로 정하는 것이 가능하다 **
처음 상태 관리 도구를 사용했을 때에는 Redux를 사용했는데 Recoil이 Redux보다 러닝 커브가 낮은 것 같다.
물론 지금 공부한 내용 외에도 더 많은 기능이 있지만
state의 초기 값을 정의하는 것과 설정해야 하는 부분들이 더 간결하다는 생각이 들었다.
<자세한 내용은 Recoil 공식 홈페이지를 확인해 주세요>
Getting Started | Recoil
Create React App
recoiljs.org