Recoil

Recoil 시작하기 | Recoil

• 배경, 문제, 존재 이유: 상태 관리

  

• 설치: npm install recoil

• 핵심 개념

  • atom → update → 구독중인 component rendering

  • 아톰, Atoms : 공유 상태 - 컴포넌트가 구독할 수 있는 상태(state)를 나타내는 단위

    const authUserState = atom({
      key: 'authUserState',
      defualt: null,
    });
    
    // 아톰을 읽거나 쓸 경우 [useRecoilState](<https://recoiljs.org/ko/docs/api-reference/core/useRecoilState/>) 훅을 사용
    function SignIn() {
      **const [authUser] = useRecoilState(authUserState);**
    

  • 셀렉터, Selectors : 순수 함수 - 아톰이나 다른 셀렉터를 입력 받아 파생된 상태를 생성하는 순수 함수. 아톰 상태 값을 동기 또는 비동기 방식 변환

    const authUserNameState = selector({
      key: 'authUserNameState',
      get({ get }) {
        const authUser = get(authUserState);
        return authUser.name;
      },
    });
    
    // **useRecoilValue** 훅 사용
    function Browse() {
      **const authUserName = useRecoilValue(authUserNameState);**
    

• 핵심 원리

  • 유연한 상태 공유: get/set 인터페이스를 사용
  • 파생된 상태: 동기 혹은 비동기 처리
  • 광범위한 앱 상태 관찰

• 동기 비동기 미들웨어: 기본적으로 비동기 처리 기능

• 리액트 18? Next.js?

- 개발자도구는? = 관리의 용이성 = 디버깅
    
    [npm: recoil-devtools-logger](<https://www.npmjs.com/package/recoil-devtools-logger#install>)
    
    [Development Tools | Recoil](<https://recoiljs.org/docs/guides/dev-tools/>)
    
    `Recoilize` → React 18 과 호환 문제