Recoil - 리코일 겉핥기 1장

저번 블로깅에서 리코일과의 만남과 key에 대한 이야기를 했다.
이어서 리코일에 대해서 알아가는 시간을 갖으면서 시리즈 형식으로 블로깅을 하려고 한다.

🍉오늘 겉할기 주제

오늘은 겉핡기의 1장으로 Recoil의 등장과 Recoil에서 직접 사용해본 6가지 RecoilRoot, atom, useRecoilState, useResetRecoilState, useSetRecoilState 그리고 useRecoilValue를 이야기 할 예정이다.

🎆Recoil의 등장 배경

Recoil은 기존 상태 방법의 불만에서 그 불씨가 점화되었다.

우리가 기존에 React에서 주로 사용한 상태관리 방법은 다음과 같이 크게 2가지이다.

1. Redux

Redux는 뛰어난 User Pool과 뛰어난 Dev tool의 존재 두 가지 만으로 가장 뛰어난 상태 관리 라이브러리라고 자부 할 수 있다.
지금은 RTK가 등장함으로써 이전보다 Boilerplate code가 압도적으로 감소했지만 아직 초기 세팅이 번거로운것은 사실이다.

2. Context API

Context API는 상태관리 도구라기 보단 react의 prop-driliing을 우회하는 도구라고 할 수 있지만, 상태를 전역으로 보낼 수 있으므로 상태관리 도구 분야에 살짝 포함시켰다.

이전 블로깅에서 언급한 것처럼 상태값을 변경하면, 자식요소들 전체가 재 렌더링하는 문제가 있다.

👫Recoil 친구들

1. RecoilRoot

• RecoilRoot는 한 개를 사용할 수도 있고 여러개를 사용할 수 있다.
• 만약 중첩이 되어 있으면 가장 안쪽의 Root가 바깥쪽 Root를 가린다.
• Context API와 Redux의 Provider와 유사하다.

RecoilRoot의 사용법은 다음과 같다.

import { RocilRoot } from 'recoil';

const AppRoot = () => {
  return (
    <RecoilRoot>
    	<ComponentThatUsesRecoil />
    </RecoilRoot>
    );
}

2. atom

• atom은 컴포넌트가 구독할 수 있는 '상태'이다.
• 리덕스처럼 상태를 구독할 수 있다.
• atom의 상태가 변경되면 atom을 구독하고 있는 컴포넌트들은 재 렌더링되면서 변경된 atom의 상태를 공유한다.
• 여기서 key는 고유한 값으로 중복되면 에러가 일어난다. 보통 함수명과 똑같이 사용한다.

atom을 사용법은 다음과 같다.

export const someState = atom({
  key: 'someState', // 고유한 키값
  default: 'defaultValue' // 초기값
});

• 위의 예시에서는 default value로 string을 사용지만 object, array등도 사용할 수 있다.

3. useRecoilState

• useRecoilState는 기본적으로 React Hook중의 대표인 useState와 동일하다.
• useState와 차이점은 변경된 상태가 전역적으로 공유된다.
• useState에 default value를 넣는 곳에 useRecoilState는 atom을 넣으면 된다.

useRecoilState의 사용방법은 다음과 같다.

const [fontSize, setFontSize] = useRecoilState(fontState);

return (
  <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
  	Click to Enlarge
  </button>
 );

내가 부딪힌 문제

useRecoilState를 사용하다가 뜻밖에 문제에 부딪혀서 고생을 했었다.

여러개의 input들 상태 관리하기에서 보고 자주 사용하는 방법이었는데 object로 여러개의 input들을 관리하는 상황에서 문제가 발생했다.
상태object한 가지 상태를 바꾸니 다른 상태는 default value로 돌아오는 문제였다.

• 이 문제는 setState에서 함수를 받는 방식이 useRecoilState도 그대로 적용이 되어서 prevState를 사용해서 해결했다.
• 이런 현상이 이러나는 이유는 아직 모르겠어서 추후에 알게되면 블로깅에 남기도록하겠다.

4. useResetRecoilState

• useResetRecoilState는 주어진 상태를 default 값으로 리셋하는 함수를 반환한다.
• 개인적으로 느끼기로는 recoil에서 가장 재밌는 기능이었다.

useResetRecoilState 사용법

import { someState } from '../atoms/someState';

const ResetButton = () => {
  const resetState = useResetRecoilState(someState);
  return <button onClick={resetState}>Reset</button>;
};

추가 - useRecoilValue와 useSetRecoilState

• useRecoilState에서 읽기 기능(useRecoilValue)과 쓰기 기능(useSetRecoilState)을 분리해 놓았다고 생각하면 된다.
• 해당 컴포넌트에서 읽기만 혹은 쓰기만 가능하게 만들고 싶다면 이 기능들을 사용하면 된다.