[ React ] Recoil 사용하기

안녕하세요! 오늘은 30기 sopt 앱잼에서 처음 사용해보게 된, Recoil에 대해 사용해본 경험을 담아 포스팅해보려고 합니다 ヾ(≧▽≦*)o

0. React의 한계

---

React는 단방향으로 바인딩을 하는 라이브러리다. 그래서 부모 component에서 자식 component방향으로만 state를 props로 전달할 수 있고, 자식의 props를 부모에게 전달하는 방법은 없다!

없지만..! 자식 component에서 부모 component의 state를 아예 바꿀 수 없는 건 아니고, 다음과 같은 방법이 존재한다.

1. 부모의 state를 바꾸는 setState 함수를 자식에게 넘겨준다.
2. 상태 관리 tool 을 사용한다.

1번의 경우 , 자식을 내려보내는 depth가 조금만 깊어지면 1번의 방법은 효율적이지 않다.

그래서 2번과 같은 상태 관리 tool이 나왔다.

2. Recoil 이란?

---

상태관리 tool 중에 하나인, Recoil이란 그래서 무엇일까? 아래는 Recoil 공식 문서에 소개된 내용이다.

Recoil을 사용하면 *atoms(* 공유 상태)에서 *selectors*(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다.

여기에 언급된 atom과 selector에 대해 조금 더 알아보자!

3. Atom

---

Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.

unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유합니다(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render된다)

Atoms는 atom함수를 사용해 생성한다. 아래는 이번 앱잼에서 내가 사용한 실제 코드인데, 필터를 누르면 태그가 추가되는 기능이 있어 해당 태그들에 대한 정보를 전역에서 관리하고자 하였다.

export const filterTagState = atom<FilterTagProps[]>({
  key: 'filterTagState',
  default: [],
});

위에서 생성한 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용한다. React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있다.

const [filterTagList, setFilterTagList] =
    useRecoilState<FilterTagProps[]>(filterTagState);

위의 코드처럼, () 안에 우리가 지정해준 atom의 key를 넣고, 나머지는 useState와 거의 유사하게 적어주면 된다! (FilterTagProps는 내가 만들어준 interface의 이름이다) 이것을 state변화가 이루어져야 하는 곳에 쓰이는 handler 안에 넣어주면 된다.

const deleteidx = filterTagList.findIndex((item) => {
        return (
          item.categoryIdx === categoryIdx && item.elementIdx === elementIdx
        );
      });

      let copyFilterTagList = [...filterTagList];
      copyFilterTagList.splice(deleteidx, 1);
      setFilterTagList(copyFilterTagList);

필터 요소를 눌렀을 때, 동작해야 하는 handler 안의 일부 코드이다. filterTagList는 마치 const 변수를 사용하는 것처럼 사용하면 되고, setFilterTagList 도 기존의 setState 함수를 사용하는 것처럼 동일하게 사용하면 전역에서 state가 변경된다!

useRecoilState외에도 다른 함수도 있는데, 비슷하지만 각각 사용하는 경우가 다르다. 다른 함수들의 경우 제일 하단에 공식문서를 첨부할테니, 참고해주길 바란다! (Recoil 공식문서가 굉장히 잘되어 있다…😉)

4. Selector

---

사실, 단기간에 recoil을 배우고 활용하다보니 앱잼에서 selector까지 활용해서 사용하는 일은 없긴 했다! 하지만 selector도 recoil의 아주아주 기본 개념이니 알아는 보고 ! 다음에 자세히 활용해보는 것으로 하자.

Selector는 Recoil에서 함수나 파생된 상태를 나타낸다. 공식문서에는 이렇게 적혀있긴 하지만, 와닿지는 않는다. 쉽게 말해 selector는 recoil에서 관리하는 상태의 특정 부분만 선택하거나, 상태를 사용하여 연산한 값을 조회할 때도 사용하면서, 다른 데이터에 의존하는 동적 데이터를 구축할 수 있게 해주는 것이다! (쓰고 보니까 필터링에서 쓰면 유용할듯! 참고해봐야겠다)

get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다. set 함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다.

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

• key - 내부적으로 atom을 식별하는데 사용되는 고유한 문자열. 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야 한다. 지속성을 위하여 사용된다면 실행 전반에 걸쳐 안정적일 필요가 있다.
• get - 파생된 상태의 값을 평가하는 함수. 값을 직접 반환하거나 비동기적인 Promise나 또는 같은 유형을 나타내는 다른 atom이나 selector를 반환할 수 있다. 첫 번째 매개변수로 다음 속성을 포함하는 객체를 전달한다:
  • get - 다른 atom이나 selector로부터 값을 찾는데 사용되는 함수. 이 함수에 전달된 모든 atom과 selector는 암시적으로 selector에 대한 의존성 목록에 추가된다. Selector의 의존성이 변경되면 Selector가 다시 평가된다.
• set? - 이 속성이 설정되면 selector는 쓰기 가능한 상태를 반환한다. 첫번째 매개변수로 콜백 객체와 새로 입력 값이 전달된다. 사용자가 selector를 재설정할 경우 새로 입력 값은 T 타입의 값 또는 DefaultValue 타입의 객체일 수 있다. 콜백에는 다음이 포함된다.:
  • get - 다른 atom이나 selector로부터 값을 찾는데 사용되는 함수. 이 함수는 selector를 주어진 atom이나 selector를 구독하지 않는다.
  • set - 업스트림 Recoil 상태의 값을 설정할 때 사용되는 함수. 첫 번째 매개변수는 Recoil 상태, 두 번째 매개변수는 새로운 값이다. 새로운 값은 업데이트 함수나 재설정 액션을 전파하는 DefalutValue 객체일 수 있다.
• dangerouslyAllowMutability - Selector는 파생된 상태의 "순수 함수"를 나타내며 항상 동일한 의존성 입력 값 집합에 대하여 동일한 값을 반환해야 한다. 이를 보호하기 위해 selector에 저장된 모든 값은 기본적으로 고정되어 있다. 경우에 따라 이 옵션을 사용하여 재정의해야 할 수 있다.

참고자료

---

https://recoiljs.org/ko/

Recoil

https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[Recoil] Recoil 200% 활용하기

https://code-masterjung.tistory.com/128

Recoil 기초 개념 및 사용법