Recoil 전역상태관리 사용법

[xmun74]

Recoil 사용법

• 전역변수로 사용하는 예시

  • A 컴포넌트의 Z번째 자식 컴포넌트에서 A의 변수를 Z에서 쓰고 싶을 때

• 설정 위치

  • 유저정보 - src/recoil/userState.ts

atoms - 전역변수 담는 곳

• 기본 설정

import { atom } from "recoil";

interface MemberInfoProps {
  isLoggedIn: boolean;
}

export const memberInfoState = atom<MemberInfoProps>({
  key: "memberInfo",  // 여기 key는 다른 key명과 중복되면 안됨!!
  default: { isLoggedIn: false }, // 초기값 설정
});

새로고침해도 전역변수 값 유지하기

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";   // 추가
const { persistAtom } = recoilPersist();  // 추가

interface MemberInfoProps {
  isLoggedIn: boolean;
}

export const memberInfoState = atom<MemberInfoProps>({
  key: "memberInfo", 
  default: { isLoggedIn: false },
  effects_UNSTABLE: [persistAtom],   // 새로고침 시 유지할 State함수에 해당 코드줄 추가
});

전역변수 사용법

• 컴포넌트에서 사용할땐 밑처럼 쓰면 된다 (useState와 유사한 방식)

import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
import { countState } from '../../recoil/count';

function ReadWriteCount() {
  const [ count, setCount ] = useRecoilState(countState); //  값, 값을 변경하는 함수(setState) 반환
  const countValue = useRecoilValue(countState); //  값만 반환
  const setCountUseSetRecoilState = useSetRecoilState(countState); // 값을 변경하는 함수(setState)만 반환
  const resetCount = useResetRecoilState(countState); // 설정된 초기값으로 리셋하기
    
  return ( ... )

recoil 파일 생성 위치

• src/recoil폴더 안에 원하는 파일명(예: filterState.ts)으로 생성하기

참고

• 공식문서
• https://abangpa1ace.tistory.com/212

[langoustinee]

굉장합니다.

[paduck-96]

엄청납니다

[soojik]

감사합니다!