React 상태관리 라이브러리이다.

• 복잡한 app에서 상태를 깔끔하게 관리하기 정말 어렵다..

• Redux은 Flux 아키텍처를 사용하는데 dispatcher, action에 많은 보일러 플레이트가 발생한다.

  

Atoms

• useState를 전역으로 사용하는 느낌이다.
• atom의 state가 변경되면 atom을 구독하는 컴포넌트들도 변경이 된다.

더 나아가서 상태를 활용하는 방법이 많이 제공된다.

• useRecoilState = [useRecoilValue, useSetRecoilState]
  • useState에서 value 혹은 setValue 하나만 사용할 수 있게 된다.
• useResetRecoilState
  • 초기 상태로 reset시켜 준다!

Selector

A selector represents a piece of derived state

• atom의 state를 get하고 set하여 다양하게 state를 활용할 수 있다.

• 캐싱 기능도 있어 받은 데이터에 더 빠른 피드백이 가능해진다.

• 비동기 처리가 가능하다!! 혁신

  • 초기 state를 비동기 통신으로 설정할 수 있게 된다.

  export const cookieState = atom({
    key: 'cookieState',
    default: []
  });
  
  export const getCookieSelector = selector({
    key: "cookie/get",
    get: async ({ get }) => {
      try{
        const { data } = await client.get('/cookies');    
        return data.data;
      } catch (err) {
      	throw err;
      }
    },
    set: ({set}, newValue)=> {
      set(cookieState, newValue)
    }
  });
  

  • 비동기 처리로 인한 fallback UI(loading)를 만들어 줘야 한다.

    • Suspense

      <RootRecoil>
        <Suspense fallback={<div>Loading...</div>}>
          <Cookies />
        </Suspense>
      </RootRecoil>
      

    • Loadable를 활용해도 된다.

      import { getCookieSeletor } from '../../reocil';
      import { useRecoilState, useRecoilValueLoadable } from 'recoil';
      
      const Cookies = () => {
        const cookieLoadable = useRecoilValueLoadable(getCookieSelector);
      
        **switch(cookieLoadable.state){**
          case 'hasValue':
            return (
              <>
                (<div>
          	    {**cookieLoadable.contents**.map(cookie =>(
                    <Card
                      cookies={cookie}
                      key={cookie.id}
                      idx={cookie.id}
                     />
                  ))}
      	     </div>)
      	  </>
      	});
           case 'loading':
        	return <Loading />;
           case 'hasError':
           	throw cookieLoadable.contents;
      }
      
      export default Cookies;