SurveyProject) Recoil_상태관리 라이브러리

설문폼 클론코딩을 하며 Recoil을 알게되었다. 그래서 기본 사용법 정리해보기.

왜 Redux 대신 Recoil 을?

1. Redux의 복잡한 코드 Redux 를 사용하고자 할 때 마주하는 가장 큰 어려움은 복잡한 코드이다. Redux 를 활용하기 위해서는 action, dispatcher, reducer, store 등 구현해야 할 기본 코드 들이 큰 편이다. 이는 보일러 플레이트를 활용해서 해결할 수 있는 문제지만, 만약 여러 개발자가 공동 작업 할 때 컨벤션을 적용하지 않고 코드를 작성할 경우 자기만 알아볼 수 있는 구조의 코드를 작성하게 된다.

2. 간단한 Recoil 의 개념 Redux 를 이해하고 사용하려면 공부해야 할 것들이 많다. 데이터의 흐름을 추상화 하여서 익히려고 하여도 여러가지 복잡한 흐름을 이해하는 건 쉽지 않다. 이에 반해서 Recoil 에서 state 를 관리하는 방법은 굉장히 간단해 보인다.

3. 쉽게 사용하는 비동기 로직 Redux 에서 비동기를 활용하기 위해서는 middleware 을 활용한다. 비동기 통신을 한다면 통신의 결과가 Success 일수도 있고 Fail 일 수도 있다. 이를 구분하여 state 관리를 해야하는데, 이를 쉽게 하기 위해서 Redux 에서는 Redux-thunk 혹은 Redux-saga 같은 미들웨어를 활용한다. 하지만 Recoil 에서는 내장된 개념인 selector 을 활용해 추가적인 미들웨어의 사용 없이 쉽게 비동기 로직을 구현할 수 있다.

상기글의 출처( 더 많은 내용이 있다:) )

npm i recoil --save

Recoil 시작하기

Atom
Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 되는 결과가 발생할 것이다.

import { atom } from 'recoil';

const testState = atom({
  key: 'testState',
  default: ['a', 'b', 'c', 'd'],
});

export default testState;

테스트용 아톰을 만들어 두었다. key값이 저장소의 이름이 된다. default에 저장할 데이터들을 넣는다.

selector(options)
Selector는 Recoil에서 함수나 파생된 상태를 나타낸다. 주어진 종속성 값 집합에 대해 항상 동일한 값을 반환하는 부작용이 없는 "순수함수"라고 생각하면 된다. get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다. set 함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다.

import { selector } from 'recoil';

import testState from './atom';

const testWithComma = selector({
  key: 'testWithComma',
  get: ({ get }) => {
    const abcdArr = get(testState);

    return abcdArr.join(':');
  },
});

export default testWithComma;

selector를 활용해 만들어둔 testState 아톰에서 어떤값만 가져올지, 혹은 어떤형태로 값을 가져올지 정해둘수있다.

useRecoilValue(state)
주어진 Recoil 상태의 값을 리턴합니다.
이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독합니다.

import { useRecoilValue } from 'recoil';

import testWithComma from '../../stores/test/testWithComma';

function CompletionPage() {
  const test = useRecoilValue(testWithComma);
  return <CompletionPageWrapper>{test}</CompletionPageWrapper>;
}

export default CompletionPage;

useRecoilValue를 사용해 selector로 정의해둔 값을 꺼내온다.

selector에서 정의해둔대로 요소를 ':'로 합쳐 뿌려준것을 볼 수 있다. 사용법은 알겠으니 잘써먹는법도 알아야한다.