Recoil이란??

recoil은 redux와 비슷하다고 보면된다. 각 중앙에서 필요한 값을 저장해서 해당 값이 필요한 컴포넌트마다 불러와서 사용하는 것이다.

그렇다면 왜 Redux대신 Recoil을 쓰는 것일까? recoil을 쓰는 가장 큰 이유는 redux보다 코드가 간결하고 단순하며 빠르게 적용할 필요가 있을때 사용하기 쉬운 간단한 상태관리 툴이기 도구이기 때문이다. 말 그대로 recoil은 redux보다 쉽다. 또한 react를 만든 페이스북에서 만든 툴이기 때문에 redux보다 react에 호환성이 높다

Recoil 사용법 with typescript

1. npm i recoil로 recoil 라이브러리 다운하기
2. RecoilRoot 설정하기

Recoil을 컴포넌트에서 사용하기 위해서는 index.tsx파일에 RecoilRoot를 설정하는 것이 필요하다.

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <RecoilRoot>
      <App />
    </RecoilRoot>
)

3. 상태관리를 위한 state를 만들어 보자

recoil상태 관리를 위해선 atom과 recoilPersist가 필요하다
recoilPersist는 새로고침을 하더라도 데이터가 날라가지 않도록 영구적 지속하기 위한 것이고, atom은 recoil상태를 표현하기 위한 상태 단위이다.

예를 들어 사용방법을 알아보자!!!

예) user의 상태를 저장하는 recoil을 만들어 사용하려고 할 때

• recoilPersist

recoilPersist를 사용하기 위한 함수 설정

const {함수이름} = recoilPersist({
	key: '어떤거에 사용할 것인가?'
    storage: 어떠한 방식으로 저장할 것인가?
})

ex)

const { persistAtom } = recoilPersist({
  key: 'loginUser',  // 로그인 한 유저에 대해서
  storage: sessionStorage, // 브라우저 session 저장소에 저장한다.
})

4. typescript를 적용을 위해 타입 설정

User에 들어오는 정보에 맞춰서 타입 설정하기

type User = {
  id: number | null
  nickname: string
  email: string
  type: number
  isLoggedIn: boolean
  phoneNumber: string
  school: string
  introduction: string
  point: number
  name: string
  counselorId: number
  counselState: number
}

5. userState 초기값 설정하기

export const userState = atom<User>({
  key: 'userState',
  default: {
    id: null,
    nickname: '',
    email: '',
    type: 0,
    isLoggedIn: false,
    phoneNumber: '',
    school: '',
    introduction: '',
    point: 0,
    name: '',
    counselorId: 0,
    counselState: 0,
  },
  effects_UNSTABLE: [persistAtom], // 영구적으로 저장하겠다는 코드(새로고침시 데이터 초기화 안됨)
})

6. userState 실제로 사용해서 상태 변경하기!!

useRecoilState(위에 5번에서 자기가 설정한 state 변수명) 이렇게 사용하기 위해서 적어줘야 사용이 가능하다.

마치 useState를 사용하는 것과 비슷하다
user는 user의 저장 값이고 setUser는 user를 저장하기 위한 행동이다.

const [user, setUser] = useRecoilState(userState)


const accessToken = response.data.token
const type = response.data.type
const userId = response.data.userId
const nickname = response.data.nickname

setUser((prevUser) => ({
          ...prevUser,
          isLoggedIn: true,
          nickname: nickname,
          type: type,
          id: userId,
          email: email,
        }))
        

이렇게 하면 상태값이 바뀐다!!

react 상태관리가 필요할 때 한번 사용해 보자