⌨️서론
첫 프로젝트를 했었을 당시에는 상태관리 라이브러리를 사용하지 못하였다. Redux라는 도구가 있었지만 제대로 배우지 못하고 적용했다가는 기존의 기능들도 작동이 안될까봐하는 불안감에 상태관리 라이브러리는 미루고 있었다. 😫 하지만 이번 프로젝트에서는 상태관리 라이브러리를 다뤄보고자 하는 목표를 두었다. 어떤 라이브러리를 쓸까 찾던 도중에 redux보다는 비교적 쉽다는 recoil이라는 라이브러리를 통해 상태관리를 하게 되었다.🏃🏻
1. Recoil이란?
Recoil은 페이스북에서 개발한 React 상태 관리 라이브러리이다. Redux와 다르게 React 전용 라이브러리이기 때문에 React에 최적화되어있다. Recoil은 React Hooks와 비슷한 방식으로 상태를 관리하며, 상태의 변화를 추적하기 위해 의존성 그래프를 사용한다.
그래서 React에 익숙하다면 Redux보다 배우거나 적용하기 쉽다는 장점이 있다.
Recoil공식 문서에 따르면 다음과 같은 장점을 가지고 있다고 한다.
1. React와 비슷하여 사용하기 쉽다 : 사용하는 방법이 Hooks 기반으로 매우 심플하며 React스럽기 때문에 러닝커브가 낮다는 장점이 있다.
2. 데이터 흐름 그래프 : 파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리된다.
3. 교차하는 앱 관찰 : 코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현한다.
4. props 값을 넘기지 않았음에도 atom에서 값을 가져오고, 수정가능하다. (atom은 후에 나오는 주요개념에서 다룰 것이다.)
2. Recoil 설치 및 적용
npm(yarn)방식으로 설치는 다음과 같이 진행해주면 된다.
npm install recoil
yarn add recoil
이렇게 설치가 완료되었다면 적용을 해줘야 하는데 적용하는 방법은 RecoilRoot를 App 컴포넌트 위에 씌워주어야 한다. index.tsx라는 파일에 다음과 같이 App을 감싸주었다.
//index.tsx
root.render(
<React.StrictMode>
<RecoilRoot>
<App />
</RecoilRoot>
</React.StrictMode>,
3. Recoil 주요 개념
Recoil 공식문서에 가면 많은 개념들이 있지만 그 중에서도 기초적인 atom, selector와 함께 일부기능에 대해서 알아보자. 그 외의 기능에 대해서는 나중에 추가적인 포스팅을 올리거나 공식 홈페이지를 참고하면 좋을 것 같다.
1️⃣ Atom
atom은 Recoil에서 가장 기본적인 상태 단위이다.
atom의 형태 : atom({key, default value값})
key값은 atom을 식별하는데 필요한 유니크한 문자열이며, default value는 초기값을 의미한다.
변수에 담는 방법은 다음과 같은 코드 예시로 담으면 된다.export const letterState = atom({ key: "letter", default: "", });atom을 사용하는 방법은 set을 위한 관리함수나 value를 위한 관리함수를 사용할 때이다.
2️⃣ Selector
selector는 하나 이상의 atom 혹은 다른 selector를 기반으로 계산된 값을 가져오는 데 사용된다. selector는 읽기 전용이며, 해당 값이 변경되어도 구독 중인 컴포넌트는 업데이트되지 않는다. ‼️즉, select기능으로 atom state를 가져와서 새로운 state를 만들어 반환하여도 원본 값에 영향을 주지 않는다
select의 사용예시는 다음과 같다. 지금 프로젝트 코드상에서는 사용한 예시가 없어서 chat GPT의 도움을 받아 예시 코드를 가지고 왔다. (도움이 많이 되는 좋은 도구이다👨💻)
//atom이 들어있는 파일
import { atom } from 'recoil';
export const loggedInUser = atom({
key: 'loggedInUser',
default: null
});
//selector 사용예시
import { selector } from 'recoil';
import { loggedInUser } from './atoms';
export const uppercaseUsername = selector({
key: 'uppercaseUsername',
get: ({ get }) => {
const user = get(loggedInUser);
if (!user) {
return null;
}
return user.username.toUpperCase();
}
});3️⃣ 간단한 Recoil 기능들
이번에 Project를 해보면서 찾거나 사용해보았던 기능들을 위주로 적어볼 것이다. 이 외의 기능도 많이 있으니 다른 기능도 찾고 싶다면, 공식 홈페이지를 이용하면 될 것이다.
⚒️기능들 차이
1. useRecoilState() : 상태값을 가져오고 수정할 수 있다.
2. useRecoilValue() : 상태값을 가져오기만 한다.(읽기 권한만 부여)
3. useSetRecoilState() : 상태값을 수정할 수만 있다. (쓰기 권한만 부여)
4. useResetRecoilState() : 상태값을 초기값으로 리셋한다.
useRecoilState() 와 useSetRecoilState()
처음에는 useRecoilState와 useSetRecoilState가 useState와 같은 기능이라고 생각했었다. 결론부터 말하자면, useState와 비슷한 기능은 useRecoilState이다. 사용방법도 비슷하다. useSetRecoilState는 atom의 인자를 받아 쓰기권한만 부여한다. 읽기 권한이 필요하지 않을 때 사용하면 불필요한 렌더링이 줄어들 수 있다. 다음은 두 가지 버전으로 상태값을 수정하고 있는 모습이다.
//useRecoilState방식
const [letter, setLetter] = useRecoilState(letterState);
const onClickSave = () => {
setLetter(value);
console.log(value);
};
//useSetRecoilState방식
const setLetter = useSetRecoilState(letterState);
const onClickSave = () => {
setLetter(value);
console.log(value);
};useRecoilState 코드는 letterState라는 atom에 대한 상태를 변경한 코드이다. React에서의 useState처럼 setter 함수 부분에 쓰기 권한을 시행하고 있는 모습이다. useSetRecoilState코드는
useRecoilValue()
사실 useRecoilState로 읽고 쓸수 있지만 쓰기 권한이 필요하지 않은 상황에서는 useRecoilValue를 사용하여 불필요한 렌더링을 줄일 수 있다. 가져오는 방법은 간단하다.
//useRecoilState방식
const [Letter, setLetter] = useRecoilState(letterState);
//useRecoilValue방식
const Letter = useRecoilValue(letterState);useResetRecoilState()
컴포넌트가 상태가 변경될 때 리렌더링을 위해 불필요한 과정을 거치지 않고 상태를 기본값으로 리셋할 수 있게 해준다. 사용하는 코드는 다음과 같다. 이 코드도 이번 프로젝트에서 사용해 본 적이 아직 없기 때문에 공식 홈페이지에 나온 코드로 예시를 들겠다.
import {todoListState} from "../atoms/todoListState";
const TodoResetButton = () => {
const resetList = useResetRecoilState(todoListState);
return <button onClick={resetList}>Reset</button>;
};위의 코드는 todoListState라는 atom을 초기값으로 리셋해주는 코드이다.
💻결론
써보면서 느낀점은 왜 이전 프로젝트에 겁을 먹고 안 썼었나 생각이 들 정도로 간단했었다. 물론 더 많은 기능을 사용하지 않아서 그런걸수도 있지만 적어도 redux를 알아볼 때와는 확실히 적용하기가 더 쉬웠다. 물론 redux도 redux만의 장점이 있으므로 이번 프로젝트를 끝낸 뒤 추후에 redux를 배울 수 있으면 배우고 다뤄보도록 하겠다.
상태관리 라이브러리에 대한 겁이 있었는데 그걸 없애주는데 큰 기여를 한 것 같다.🤩
📚참고자료
