Recoil 사용하기(feat. react)

Recoil는 React를 위한 상태 관리 라이브러리다.

 

Recoil 공식 홈페이지

https://recoiljs.org/ko/docs/introduction/getting-started/

Recoil 시작하기 | Recoil

 

React를 사용하는 환경에서 흔히 Redux를 사용하여 상태관리를 많이하는데 최근들어 Recoil의 사용이 점차 늘어나는 추세인듯 하다.

 

그 이유로는

1. 단순한 사용방법

2. React를 만든 Facebook에서 직접 만든 것이라 호환성이 다른 상태관리 라이브러리보다 좋다 

정도로 파악했다.

 

Redux를 사용해본 사람들은 어느정도 느꼇겠지만 초반에 적용하기위한 공부와 경험이 꽤나 필요하고, 사용하는 방법이 꽤나 까다롭다.

그 증거로 통계를 찾아보면 사용하는 사람들은 많은데 반해 만족도는 타 상태관리 라이브러리들에 비해 낮게 나온다.

 

그럼 이제 Recoil을 적용하는 방법을 알아보자.

일단 Recoil을 npm을 통해 설치한다.

 

설치

npm 설치

npm install recoil

or yarn  설치

yarn add recoil

 

RecoilRoot 배치

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다. (Recoil 본문 발췌)

import { RecoilRoot } from 'recoil';

export default function App(props: AppProps) {
    const { Component } = props;
  
    return (
        <RecoilRoot>
          <Component {...pageProps} />
        </RecoilRoot>
    );
}

저는 현재 next.js 프레임워크 환경에서 진행하고 있기 때문에 _app.tsx에서 RecoilRoot 컴포넌트를 감싸줬습니다. 

react 환경에서는 app.js에서 감싸주면 됩니다.

 

Atom 설정

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

import { atom } from 'recoil';

export interface IContentTypes {
    name: string;
    status: boolean;
    message: string;
}

//recoil state 생성
export const contentState = atom<IContentTypes>({
    key: 'content',
    default: {
        name: 'test',
        status: false,
        message: ''
    }
});

이런식으로 별도 state.ts 파일을 생성하여 관리할 상태를 atom을 사용하여 설정작업을 진행해준다.

(typescript 환경이 아닌경우 타입 내용 빼고 사용)

 

 

위 작업들로 이제 recoil 상태관리를 사용할 준비는 벌써 끝났다. redux와 비교하면 너무도 단순하다.

 

redux : 스토어 생성 > 리듀서 생성 > 액션 설정 > 디스패치(액션) 호출 

recoil : 스토어 생성 > 호출 

 

사용방식에 따라 단계는 좀 바뀔 수 있지만 간단하게는 저런 차이다.

 

사용하기

import { useState, useEffect } from 'react';

//state, recoil import
import { contentState } from './state';
import { useSetRecoilState, useRecolValue } from 'recoil';

export default function sample() {
	
    const [reqContent, setReqContent] = useState({
        name: "sample",
        status: true,
        message: "테스트 메세지"
    });
    
    //recoil 사용 선언부
    const setContent = useSetRecoilState(contentState);
    const content = useRecolValue(contentState);
  
    useEffect(()=>{
        //recoil setting 
        setContent(reqContent);
    },[])
    
    return (
    	{content && (
        	<div>
            	{content.name},
                {content.status},
                {content.message}
            </div
        )}
    );
}

1. 사용할 recoil state를 import

2. 사용할 recoil 기능 import

    ( useRecoilState : react의 useState랑 동일한 기능이라고 생각하면 된다.

      useSetRecoilState : useState에서 setter만 있는것

      useRecolValue : useState에서 value만 있는것

      useResetRecoilState : 기본값으로 초기화 시키는 기능)

3. 위 기능을 사용하여 기능 구현

 

이처럼 Recoil은 React의 useState와 기능이 비슷하게 구성되어있다.

React 사용자라면 쉽게 이해할 수 있을듯하다.

 

추천글

Recoil 새로고침 데이터 유지하기(feat. recoil-persist)