Recoil

Recoil

• React 애플리케이션에서 전역 상태를 효율적으로 관리하기 위한 라이브러리

Atoms

• Atom은 전역 상태를 나타내는 기본 단위
• 예를 들어, 로그인 상태, 사용자 정보, 테마 등을 저장할 수 있다.
• Atom은 'atom' 함수를 사용하여 생성되며, 각 Atom은 고유한 키('key')와 초기 값('default')을 가집니다.

    import { atom } from 'recoil';
    export const isLoggedInState = atom({
      key: 'isLoggedInState',
      default: false, //초기 값
    });

Selectors

• Selector는 Atom을 기반으로 다른 값을 계산하거나 파생된 상태를 만든다.
• 예를 들어, 기존 상태를 이용해 다른 값을 계산할 때 사용한다.
• Selector는 'selector' 함수를 사용하여 생성되며, 'get' 함수를 통해 읽기 전용으로 Atom 값을 가져올 수 있다.

    import { selector } from 'recoil';
    import { isLoggedInState } from './atoms';

    export const userNameSelector = selector({
      key: 'userNameSelector',
      get: ({ get }) => {
        const isLoggedIn = get(isLoggedInState);
        return isLoggedIn ? '홍길동' : '방문자';
      },
    });

컴포넌트에서 사용 - useRecoilState

• 'useRecoilState' 훅은 Atom의 상태를 읽고 업데이트할 수 있는 함수를 반환한다.
• 이 훅을 사용하면 Atom의 현재 상태 값과 상태 값을 업데이트하는 함수를 얻을 수 있다.
• 마치 useState 같은 존재랄까?

    import { useRecoilState } from 'recoil';
    import { isLoggedInState } from './atoms';

    function LoginButton() {
      const [isLoggedIn, setLoggedIn] = useRecoilState(isLoggedInState);

      const handleClick = () => {
        setLoggedIn(!isLoggedIn); // 상태 업데이트
      };

      return (
        <button onClick={handleClick}>
          {isLoggedIn ? 'Logout' : 'Login'}
        </button>
      );
    }

컴포넌트에서 사용 - useRecoilValue

• 'useRecoilValue' 훅은 Atom이나 Selector의 현재 값만을 읽을 수 있다. - - 업데이트는 불가능하다.
• 만약 해당 상태가 변경되면 해당 컴포넌트는 자동으로 리렌더링된다.

    import { useRecoilValue } from 'recoil';
    import { userNameSelector } from './selectors';

    function WelcomeMessage() {
      const userName = useRecoilValue(userNameSelector);

      return <p>안녕하세요! {userName}님!</p>;
    }

☞ 'useRecoilState'와 'useRecoilValue'를 통해 Recoil을 사용하면, 전역 상태를 쉽게 읽고 업데이트할 수 있다.

• 같이 사용하는 예시

    import { useRecoilState, useRecoilValue } from 'recoil';
    import { isLoggedInState, userNameSelector } from './atoms';

    function UserInfo() {
      const [isLoggedIn, setLoggedIn] = useRecoilState(isLoggedInState);
      const userName = useRecoilValue(userNameSelector);

      return (
        <div>
          <p>{isLoggedIn ? '안녕하세요 ${userName}님!' : '로그인 해주세요'}</p>
          <button onClick={() => setLoggedIn(!isLoggedIn)}>
            {isLoggedIn ? 'Logout' : 'Login'}
          </button>
        </div>
      );
    }

오늘의 한줄평 : 와, 리덕스보다 쉽지만, 튜터님께 들은대로 주의해서 필요할 곳 만 써야겠다!