[React] Recoil 사용해서 전역상태 관리, 사용법

끔-찍

위와같은 구조를가진 A 라는 컴포넌트에 변수 num이 존재하고 해당 num을 자식 컴포넌트인 Component G에서

값을 바꾸기 위해서는 Component A에서 props로 B로 전달하고 그 props를 C로 전달 D로전달.... 하면서 G까지 전달해야 할것이다. 이렇게만 봐서도 끔찍한 구조인데 극단적으로 만약 컴포넌트의 깊이가 100개이상이라면? 

props를 타이핑하다가 하루가 끝날것이다.

 

 

드릴

이러한 문제점을 Props Drilling 이라고 하며 이를 해결하기위해 props.children을 사용하거나

전역상태관리 라이브러리인 Recoil, Redux, Mobx 혹은 React 훅 useContext 를 사용하여 해결할수있다.

 

이중에 하나인 Recoil을 사용해서 상태관리를 해볼것이다.

Recoil 설치

//npm 사용시
npm install recoil

//yarn 사용시
yarn add recoil

 

설치가 완료되면, 사용하고자하는 컴포넌트의 최상단 위치에 <RecoilRoot>태그로 감싸준다.

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

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

 

Atom

상태를 Atom이라는 메소드로 관리할수 있는데 Atom을 공식문서에서는 아래와 같이 소개한다.

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

 

내가 이해한 바로는 Atom을 모든 컴포넌트들에서 이용,수정할수있으며 값이 변경되면 해당 Atom을 사용하고 있는 컴포넌트가 재렌더링된다. 컴포넌트의 깊이에 상관없이 상태를 관리 할 수 있는것이다. (같은말 아닌가?)

 

본인은 Atom을 States라는 폴더밑에 정리를 해두었다.

 

사용방법은 atom을 import하고 key와 default값을 정해주면된다.

해당 key값은 유니크한 값이 들어가야한다.

본인은 login상태를 가지고 있는 loginState라는 atom을 만들었다.

import { atom } from "recoil";

export const loginState = atom({
  key: "loginState",
  default: false,
});

 

useRecoilState, 상태값 가져오고 변경하기

상태값을 가진 atom을 만들었으면 컴포넌트에서 사용하면된다. 사용법은 useState와 동일하게 사용하면된다.

사용하고자하는곳은 Auth컴포넌트와 Main컴포넌트에서 사용할것이다.

 

useRecoilState와 loginState를 import해준다.

 

변수를 선언하고 useRecoilState()로 초기값을 사용하고자하는 atom을 넣어주면된다.

loginState라는 atom을 만들었기에 이번 실습에서는 loginState를 초기값으로 설정해주겠다.

로그인이 성공하면 loginState의 상태값을 false로 바꿔준다. loginState를 구독하고있는 컴포넌트에서는 해당 상태값이 바뀌면 재 렌더링이된다. 때문에 loginState를 구독하고있는 Main컴포넌트도 재 렌더링이 일어나게된다.

import { loginState } from "../../states/tokenState";
import { useRecoilState } from "recoil";

function Auth() {
    //useRecoilState의 초기값을 loginState Atom으로 설정한다.
    //변수이름은 원하는거로 하면된다.
    const [status,setStaus] = useRecoilState(loginState);
    const login = async () => {
        try {
          //로그인로직~~
          //로그인성공시 loginState Atom의 default값을 true로 변경한다.
          if (res.status === 200) {
            setStatus(true);
            navigate("/main");
          }
        } catch (e) {
          console.log(e);
        }
      };
}

 

Main컴포넌트에서 props로 따로 값을 받을필요없이 loginState atom을 사용해서 값에 접근하면된다.

Auth컴포넌트에서 선언했던것과같이 useRecoilState로 값을 가져와도되고 useRecoilValue로 값을 가져와도된다.

수정할일이 있다면 useRecoilState로 선언해주는것이 좋을것이고, 값을 받기만 한다면 useRecoilValue를 사용하면된다.

import { useRecoilState, useRecoilValue } from "recoil";
import { loginState } from "../../states/tokenState";

fcuntion Main(){
    // 방법 1. useRecoilStatus사용, 읽기만한다면 setStatus를 선언하지않아도됨
    const [status]=useRecoilState(loginState);
    // 방법 2. useRecoilValue로 값을 읽어오기만함
    const status = useRecoilValue(loginState);
    return(
    	<>	
            {/* login을해서 loginState의 default값이 true면 is Login이 false면 is Logout이 나온다. */}
            {   status ? 
                <h1>is Login</h1> :
                <h1>is Logout</h1>
            }
        </>
    )
}

항상 느끼는거지만 글을 읽어보는것도 도움이되지만 직접 써보고 익히는것이 좀더 잘 와닿고 도움이되는것같다.

 

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