React recoil 전역상태

 

Recoil

Recoil은 페이스북이 2020년 5월에 소개한 React 전용으로 나온 상태 관리 라이브러리다.

이전에 Redux로 flux패턴을 사용해서 전역관리 상태 관리가 가능했지만 react 전용 라이브러리가 아님으로 초기세팅이 요구되고 비동기 데이터를 사용하려면 미들웨어 설치 등의 불편한점이 있다 

Recoil의 장점으로

• Recoil은 전역 상태 관리를 컴포넌트 내부의 상태 관리처럼 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공한다.
• 비동기 작업을 위한 상태 관리도 간단하며 비동기적으로 발생하는 상태를 쉽게 다룰 수 있도록 해준다.
• Recoil은 성능 최적화를 위한 메모이제이션과 같은 기술을 활용합니다. 이를 통해 상태의 변경 사항을 효율 적으로 추적하여 컴포넌트의 렌더링을 최적화 할 수 있습니다.

// atoms.js

import { atom } from "recoil";

export const userState = atom({
  key : 'useState'
  default: {
    name: 'Mr.Park',
    age : 30,
    email : 'park@example.com'
  },
 });

위 코드에서는 ' atom' 을 사용하여 Recoil 상태를 정의하고 있습니다. 'userState' 라는 전역 상태를 만들었고, 여기에 기본값을 설정했습니다.

 

// UserProfile.js

import React from "react"
import { useRecoilState } from "recoil"
import { useState } from "./atoms"

const UserProfile = () => {
 const [user, setUser] = useRecoilState(useState);
 
 const updateUser = () => {
   setUser({...user, age: user.age +1});
 };
 
 return (
  <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={updateUser}>Increase Age</button>
    </div>
 
 );
}

export default UserProfile

data-flow graph

상태 데이터가 atoms -> selectors -> 컴포넌트 순서로 흐르는 것을 말한다.

atom은 Recoil에서 상태의 단일 조각을 나타내며, 다른 컴포넌트 간에 공유될 수 있는 전역 상태의 기본입니다. 이를 통해 여러 컴포넌트에서 동일한 상태에 접근하고 해당 상태를 변경할 수 있습니다.

 

Recoil은 보통 초기연돌할 때 많이 사용합니다

 

// App.js

import { RecoilRoot } from "recoil";
import Home from "./Components/Home";

function App() {
  return (
    <RecoilRoot>
      <Home />
    </RecoilRoot>
  );
}

export default App;

끝입니다.