recoil을 활용하여 user-defined hooks 만들고 상태관리하기

도서 <리액트 네이티브를 다루는 기술>을 읽고 도움이 될 만한 부분을 기록합니다

atom으로 상태 만들기

import {atom} from 'recoil';

export interface User {
  id: number;
  username: string;
  displayName: string;
}

interface AuthState {
  user: User | null;
}

// 타입스크립트 환경에서 recoil을 사용할 때에는 atom의 generic으로 관리
export const authState = atom<AuthState>({
  key: 'authState',
  default: {
    user: null,
  },
});

 

상태를 관리하는 user-defined hooks 만들기

현재의 user 상태를 불러오는 hooks인 useUser()

import {useRecoilValue} from 'recoil';
import {authState} from '../atoms/auth';

export default function useUser() {
  const auth = useRecoilValue(authState);
  return auth.user;
}

 

새로운 사용자로 user 상태를 업데이트하거나, 로그아웃하면서 user 상태를 초기화 시키는 hooks

import {useSetRecoilState} from 'recoil';
import {authState, User} from '../atoms/auth';
import {useMemo} from 'react';

export default function useAuthActions() {
  const set = useSetRecoilState(authState);

  return useMemo(
    () => ({
      authorize: (user: User) => set({user}),
      logout: () => set({user: null}),
    }),
    [set],
  );
}

 

useMemo 라는 성능을 최적화하기 위한Hook 함수이다.

useMemo 의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고 두번째 파라미터에는 deps 배열을 넣어주면 되는데, 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다 

 

라고 하는데 아직은 잘 모르겠음..

 

 

사용하기

import useAuthActions from '../hooks/useAuthActions';
import useUser from '../hooks/useUser';

const {authorize, logout} = useAuthActions();

const onLogIn = () => {
	authorize({
      id: 1,
      username: 'sezzled',
      displayName: '세리둥절',
    })
}