[Recoil] Recoil이란? Recoil 사용법! [9/18 study]

 

 

Recoil이란? Recoil 사용법!

 

 

 

 

강의를 들으면서 공부 중 Recoil 라이브러리를 처음 접하게 되어 나중에봐도 안까먹으려고 포스팅 합니다.. (나를 위해)

 

시작하기 앞서

호환성 및 단숨함을 이유로 외부의 글로벌 상태관리 라이브러리를 사용하는 것 보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 좋다.. 좋지만 사용하는 이유가 있겠죠?

React에는 다음과 같은 한계가 있다

- 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유가 될 수 있으므로, 이 과정에서 거대한 트리가 다시 렌더링 되는 좋지 못한 효과를 야기한다.

- Context는 단일 값만 저장할 수 있고, 여러 값의 집합을 담을 수는 없다.

결론적으로

- 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 말단(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다.

 

Recoil이란?

- React 애플리케이션 상태 관리를 위한 라이브러리

- Facebook (메타)에서 개발한 상태 관리 라이브러리로, Atom 이라는 단위로 상태를 정의하고 이를 이용해 컴포넌트 사이에서 데이터를 공유하며 상태를 업데이트함

 

왜 하필 Recoil을 사용할까?

- 간편한 상태관리: 간편하게 상태를 정의하고 관리할 수 있음

- 최적화된 리렌더링: 내부적으로 최적화되어 필요한 경우에만 리렌더링

- 복잡한 애플리케이션에 적합: 복잡한 상태 관리를 효과적으로 다루는데 적합함

 

짧게나마 vscode에 주석으로 공부한 내용과 예시를 공유해 보려고 한다

 * Recoil 기능: Atom, Selector
 * Atom: 앱의 상태를 정의하는 단위로, atom 함수를 통해 생성
 * ex)
 * import { atom } from 'recoil';
 *
 * const userState = atom({
 *  key: 'userState',
 *  default: null,
 * });
 *
 * Selector: 파생된 상태를 만들어 내는 함수로, 다른 atom이나 selector로부터 값을 계산
 * ex)
 * import { selector } from 'recoil';
 *
 * const userNameState = selector({
 *  key: 'userNameState',
 *  get: ({get}) => {
 *    const user = get(userState);
 *    return user ? user.name : 'Guest';
 *  },
 * });

 

 * Recoil 훅: useRecoilState
 * - Atom 값을 읽고 업데이트하는데 사용되는 훅. useState과 비슷한 구조이지만 전역 상태를 다룬다는 점에서 차이
 * ex)
 * import { atom, useRecoilStata, RecoilRoot } from 'recoil';
 *
 * const countState = atom({
 *  key: 'countState',
 *  default: 0,
 * });
 *
 * function Counter() {
 *  const [count, setCount] = useRecoilState(countState);
 *
 *  return (
 *    <div>
 *      <p>Count: {count}</p>
 *      <button onClick={() => setCount(count + 1)}>Increment</button>
 *      <button onClick={() => setCount(count - 1)}>Decrement</button>
 *    </div>
 *  );
 * }

 

 * Recoil 훅: useRecoilValue
 * - 단순히 Atom 값을 읽는데에 사용되며, 상태 업데이트를 트리거하지 않음
 * ex)
 * import { selector, useRecoilValue, RecoilRoot } from 'recoil';
 *
 * const userNameState = selector({
 *  key: 'userNameState',
 *  get: ({ get }) => {
 *    const user = get(userState);
 *    return user ? user.name : 'Guest';
 *  },
 * });
 *
 * function UserInfo() {
 *  const userName = useRecoilValue(userNameState);
 *
 *  return <p>Welcome, {userName}!</p>;
 * }

 

 * Recoil 훅: useSetRecoilState
 * - Atom 값을 업데이트하는 setter 함수를 반환함
 *
 * import { atom, useSetRecoilState, RecoilRoot } from 'recoil';
 *
 * const countState = atom({
 *  key: 'countState',
 *  default: 0,
 * });
 *
 * function Counter() {
 *  const setCount = useSetRecoilState(countState);
 *
 *  return (
 *    <div>
 *      <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment</button>
 *    </div>
 *  );
 * }

 

 * Recoil 훅: useResetRecoilState
 * - Atom 값을 초기값으로 리셋하는 함수를 반환함
 * ex)
 * import { atom, useResetRecoilState, RecoilRoot f from 'recoil';
 *
 * const countState = atom({
 *   key: 'countState',
 *   default: 0,
 * });
 *
 * function ResetButton () {
 *   const resetCount = useResetRecoilState(countState);
 *
 *   return <button onClick={resetCount}>Reset Count</button>;
 * }

 

React를 사용할 줄 아는 사람은 대충봐도 감이 올거라고 생각한다... 그런데 요즘은 zustand가 유행이라고 한다 ㅎ..

 

참고) 공식문서

https://recoiljs.org/ko/

Recoil