Recoil로 상태 관리하기

상태 관리에 대해 알아보자

상태란?

컴포넌트 내부에서 관리되고 애플리케이션의 렌더에 영향을 미치는 데이터

❗️ props drilling

props를 이용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하는데, 계속해서 하위 컴포넌트로 데이터를 전달하는 것

❗️ props의 한계

① 상위 컴포넌트에서 바로 밑 컴포넌트로만 전달이 가능하기 때문에 바로 밑 컴포넌트가 아닌 컴포넌트에 props로 데이터를 전달하려면 중간 컴포넌트들에게도 전달해야 한다.
② 상위 컴포넌트에서 하위 컴포넌트로 전달 가능하므로 형제 컴포넌트에게는 데이터 전달 불가능하다.

전역상태란?

지역상태
특정 컴포넌트 안에서만 관리되는 상태
다른 컴포넌트와 데이터를 공유하지 않음

전역상태
프로젝트 전체에 영향을 끼치는 상태

Recoil 설치하기

Recoil이란

페이스북에서 만든 React를 위한 상태 관리 라이브러리

React의 useState 훅과 비슷하게 작동하는 직관적인 구조를 가지고 있다.

구성

Atoms: 상태의 단위로 값이 업데이트 되면 구독한 컴포넌트는 리렌더링
Selectors: Atoms나 다른 Selectors를 입력으로 받는 순수 함수로 상위의 Atoms나 Selectors가 업데이트 되면 하위의 Selector 함수도 다시 실행됨

Recoil 설치 명령어

npm install recoil

Recoil 사용 방법

① RecoilRoot 생성

index.js 파일의 Main 컴포넌트를 RecoilRoot로 감싸준다.

src/index.js

import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil";
import Main from "./Main";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RecoilRoot>
    <Main/>
  </RecoilRoot>
);

② 상태 저장 파일

전역 상태를 관리할 파일을 만든다. recoil 폴더를 하나 생성해서 그 안에 만들어 주었다.

app/recoil/AnswerAtom.js

import { atom } from 'recoil';

export const modalState = atom({
    key: 'answerModalState',
    default: false,
});

관리할 상태를 위와 같이 atom 함수를 이용해서 정의해주면 된다.

❗️ 전역상태를 사용하는 이유

• 컴포넌트 간 데이터를 주고 받기 위해 props를 사용할 수 있지만 부모에서 자식으로만 전달 가능하기 때문에, 형제 컴포넌트와 데이터 공유가 어렵다.
• 부모 바로 밑의 자식이 아닌 한참 아래의 자식에게 데이터를 전달할 때 props로 전달하게 되면 중간의 컴포넌트들은 필요없는 데이터를 전달해야한다.
• 데이터를 간단하게 한번만 전달하는게 아닌 계속해서 여러 컴포넌트에서 접근하고 사용할 때, props로 전달하게 되면 복잡해진다.

컴포넌트의 위치에 관계 없이 어디서든 상태를 불러와 관리할 수 있다.

atom 함수 사용 방법

import { atom } from "recoil";

export const exampleState = atom({
    key: 'exampleState',
    default: 0,
});

key: atom을 식별하는데 필요한 고유한 문자열
default: 초기 값

selector: 상태 변환을 해주는 역할

import { selector, atom, useRecoilValue } from 'recoil';

1. textState라는 상태 생성
const textState = atom({
  key: 'textState', 
  default: '', 
});

2. textState에 저장된 값의 길이를 반환하는 selector
const textCountState = selector({
  key: 'textCountState', 
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
});

3. useRecoilValue()로 textCountState 호출
4. count 변수에 textState의 길이를 저장
function textCounter() {
  const count = useRecoilValue(textCountState);

  return <>Text Count: {count}</>;
}

③ useRecoilValue, useRecoilState

1. useRecoilValue

 상태에 저장된 값을 불러오는 역할

import { useRecoilValue } from "recoil";
import { modalState } from "../recoil/AnswerAtom";

const showModal = useRecoilValue(answerState);

2. useRecoilState

 상태에 저장된 값을 업데이트 하는 역할로, useState와 유사함

import { useRecoilState } from "recoil";
import { modalState } from "../recoil/AnswerAtom";

const [showModal, setShowModal] = useRecoilState(modalState);

* setShowModal()를 통해 modalState를 false에서 true로 변경
setShowModal(true);
function page() {
  return (
    <>{ showModal && <Modal/> }</>
  )
}

Modal 컴포넌트는 보이지 않다가 showModal 상태가 true가 되면서 보여지게 된다.