[React] 상태관리 라이브러리 Recoil

⭐️ Redux? Recoil?

Recoil에 대해 설명하기 전, 나는 Redux를 사용했던 경험이 있다.
Redux가 React 상태관리 라이브러리 중 가장 유명하다 생각했고 다른 사람들이 많이 사용하는데 이유가 있겠지! 싶어서 사용했었다.

처음 사용해보니 초기세팅하기 위해 공부가 어려웠다..
그 후, 사이드 프로젝트를 진행하게 되었는데 Recoil에 대해 알게되었다.
더 간단하고 소규모 프로젝트에는 Recoil이 적합하다는 이야기를 듣고 Recoil을 사용하기로 결심했다!

그리고 페이스북에서 만들어서 리액트와 호환성도 좋다고 한다.

⭐️ Recoil 설치

npm install recoil

or

yarn add recoil

위의 명령어로 설치하고
루트 컴포넌트를 RecoilRoot로 감싸주면 사용할 준비 끝!

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
    return (
        <RecoilRoot>
            <App />
        <RecoilRoot />
    );
}

⭐️ atom

• atom은 Recoil에서 상태를 정의하고 유지하는 기본 단위
• key 값과 default 값을 무조건 가져야 함
  • key 값 고유한 식별자가 와야 함
  • default 값으로 초기값을 지정해줘야 함(지정하지 않으면 'undefined')
• atom 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하는데, atom에 변화가 생기면 그 atom을 구독하는 모든 컴포넌트가 상태를 공유하기 때문에 리렌더링 됨!

import { atom } from 'recoil';

export const countState = atom({
    key: "countState",    //고유한 식별자
    default: 0,    //기본 값
});

위처럼 key 값과 default 값을 atom으로 감싸서 선언해준다.

const [count, setCount] = useRecoilState(countState);    //useReocilState(키 값)

우리가 자주쓰는 useState처럼 가져와서 사용하면 돼서 편리하다.

useState와 다른 점은 count가 전역상태라는 것!!

⭐️ hook 함수들

위에서 잠깐 나왔던 useRecoilState()도 hook 함수 중 하나이다.
hook 함수들에 대해 살펴보자.

1. useRecoilState : useState처럼 값과 값을 변경하는 함수를 반환한다.
2. useRecoilValue : 값만 반환한다. 값을 update 할 수 없다.
3. useSetRecoilState : 값을 변경하는 함수만 반환한다.
4. useResetRecoilState : 값을 atom에서 설정했던 기본 값으로 reset하는 함수를 반환한다.

이외에도 selector라는 중요한 개념도 있는데 이 내용은 조만간 따로 정리해야겠다.
직접 사용해보면서 장점과 단점을 깨달아봐야겠당..!
아무리 개념 공부 많이 해봤자 사용못하면 말짱도루묵,,