[React] Recoil로 상태 관리 하기

redux로 할 때는 좀 어려웠는데 recoil로 하니까 쉽다!!

---

 

 

Recoil은 리액트의 상태 관리 라이브러리이다.

api가 단순한 형태이기 때문에 배우기 쉬움!!

 

상태 관리를 왜 해야하냐?

개발을 하다보면 하나의 상태를 여러 컴포넌트에 써야할 때가 있다.

근데 밑의 사진 처럼 provider 1에서 정의한 state를 저~~밑에 까지 전달해줘야 한다면?

provider2 - 3 - 4 ... 까지 전달을 해줘야 하는 상황이다 provider2,3,4에는 쓰이지 않음에도 불구하고!!!

recoil 사용 전

 

그래서! recoil을 통해 상태 관리를 해주는 것이다.

recoil을 사용하면 atom을 통해 다음과 같이 원하는 컴포넌트에서 state를 사용할 수 있다.

recoil 사용 후

 

설치 방법

npm i recoil

yarn add recoil

 

이후 index에 가서

<RecoilRoot>
      <App />
</RecoilRoot>

이렇게 recoilRoot로 묶어준다 이러면 설정은 끝!

 

Atom

atom은 하나의 상태!! 다음과 같이 설정한다.

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

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

key와 default값이 꼭 필요하다

 

import {useRecoilState} from "recoil";

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

사용할 땐 원하는 컴포넌트에서 위와 같이 쓴다.

useState와 아주 유사

value만 쓰고 싶을 때는 useRecoilValue(textState)와 같이 써준다

 

Selector

Selector는 파생된 state(derived state)의 일부를 나타낸다.
즉, 기존 state를 가져와서 이용해 새로운 state를 만들어서 반환할 수 있음

기존 state를 이용만할 뿐 변형x

derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다

const toDoSelector = selector({
    key,
    get: ({get}) => {
        블라블라
    }
})

key는 id값이고 get은 {get}을 사용하여 원하는 atom을 가져올 수 있고 그 안에서 진행된 것을 반환한다.

 

https://github.com/juhui88/ReactStudy/commit/db45b8e2c82b268ac6c79e2c168d3fb0c6105959

selectors 이용 · juhui88/ReactStudy@db45b8e

썼던 코드를 참고하는게 좋을거 같다

Enums

타입스크립트가 제공하는 기능 중 하나

enum은 열거형을 사용하여 의도를 문서화하거나 구분되는 사례 집합을 더 쉽게 만들 수 있음

//숫자 열거형 (Numeric enums)
enum Direction {
    "Up", // 0으로 정의
    "Down",
    "Left",
    "Right",
}

//문자열 열거형 (String enums)
enum Direction {
    "Up" = "UP",
    "Down" = "DOWN",
    "Left" = "LEFT",
    "Right" = "RIGHT",
}