recoil 예시 코드 정리

Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션의 상태를 효율적으로 관리하기 위한 도구. Recoil은 React의 컴포넌트 기반 아키텍처와 잘 통합되며, 단순하고 직관적인 API를 제공하여 개발자가 상태를 정의하고 사용하기 쉽게함

Recoil은 아토믹(Atomic)한 상태 관리를 강조. 아토믹한 상태 관리란 상태를 작은 조각(Atoms)으로 나누고, 이러한 작은 조각들을 조합하여 복잡한 상태를 구성하는 것을 의미함. 이를 통해 컴포넌트 간의 상태 공유와 상태 업데이트를 관리할 수 있음.

Recoil을 사용하는 일반적인 경우는 아래의 두 가지:

1. 전역 상태 관리: 여러 컴포넌트에서 공유해야 하는 전역 상태를 관리할 때 Recoil을 사용할 수 있음. 예를 들어, 로그인 상태, 테마 설정, 언어 설정 등의 전역 상태를 Recoil을 사용하여 관리할 수 있음.

2. 컴포넌트 간 상태 공유: 여러 컴포넌트 간에 상태를 공유해야 할 때 Recoil의 상태를 활용할 수 있음. 이를 통해 상태 업데이트를 쉽게 추적하고, 관련된 컴포넌트들 간에 일관된 상태를 유지할 수 있음.

// atoms.js
import { atom } from 'recoil';

// 전역 상태를 정의하는 Atoms
export const loggedInUserAtom = atom({
  key: 'loggedInUser',
  default: null,
});

export const themeAtom = atom({
  key: 'theme',
  default: 'light',
});

// components/LoginButton.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { loggedInUserAtom } from './atoms';

const LoginButton = () => {
  const [loggedInUser, setLoggedInUser] = useRecoilState(loggedInUserAtom);

  const handleLogin = () => {
    // 로그인 처리 로직
    // ...
    setLoggedInUser('user123');
  };

  return (
    <button onClick={handleLogin}>로그인</button>
  );
};

// components/Profile.js
import React from 'react';
import { useRecoilValue } from 'recoil';
import { loggedInUserAtom } from './atoms';

const Profile = () => {
  const loggedInUser = useRecoilValue(loggedInUserAtom);

  return (
    <div>
      {loggedInUser ? `환영합니다, ${loggedInUser}님!` : '로그인하세요.'}
    </div>
  );
};

// App.js
import React from 'react';
import { RecoilRoot } from 'recoil';
import LoginButton from './components/LoginButton';
import Profile from './components/Profile';

const App = () => {
  return (
    <RecoilRoot>
      <LoginButton />
      <Profile />
    </RecoilRoot>
  );
};

export default App;