Recoil로 상태관리하기

내가 전역상태로 관리해야하는 값

 

1. 현재 채팅방 아이디

2. 현재 채팅을 치고 있는 유저 아이디

3. 채팅 input을 채팅 배열에 반영

 

이 세가지이다.

원래는 redux를 쓰려고 하였으나... recoil이 훨씬 간단하다고 하여 recoil을 도전해본다

 

Recoil 설치 with typeScipt

npm install recoil

로 설치하면 된다.

-> 이제 리코일이 타입스크립트를 지원한다고 한다!!

RecoilRoot로 루트파일 감싸주기

index/App.tsx

import { RecoilRoot } from 'recoil';
import ReactDOM from 'react-dom/client';

import App from './App';

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

과 같이 루트파일에  RecoilRoot를 import해서 가져온 후 이 컴포넌트를 이용해 App 파일을 감싸준다.

 

Recoil Store에 사용할 전역 초기값 선언해주기

recoil/store.tsx

import { atom } from 'recoil';
import chatRoom from '../assets/chatRoom';

export const activeId = atom<any>({
  key: 'activeId',
  default: 1,
});

export const chatList = atom<any>({
  key: 'chatList',
  default: chatRoom,
});

여기서의 atom은 '상태'를 의미하고 이 atom으로 선언한 변수들을 끌어다 썼을 때 이 변수들이 변경되면 얘가 해당 변수들을 구독하고 있어서 알아서 전역 상태를 바꿔준다!!! 그야말로 개꿀이다.... 

 

useRecoilState를 통한 전역변수 변경

import { useRecoilState } from 'recoil';
import { activeId } from '../../recoil/store';

...

const [active, setActive] = useRecoilState(activeId);

...

<ProfileImg
            src={`img/${userImage}.jpeg`}
            style={{ opacity: 0.5 }}
            onClick={() => setActive(userId)}
          />

여기서의 useRecoilState란 리액트의 useState와 같은 녀석으로 선언해놓은 전역변수 값을 간편하게 바꿀 수 있다!!!!

나는 여기서 현재 활성화된 사용자의 값(active)을 불러와 다른 프로필 사진을 클릭하면 다른 사용자의 시점으로 화면을 바꾸기 위해(setActive) 사용하였다.

 

useRecoilValue를 통한 전역변수 호출

import { useRecoilValue } from 'recoil';
import { activeId, chatList } from '../../recoil/store';

...

const active = useRecoilValue(activeId);
const chatting = useRecoilValue(chatList);

전역변수의 변경이 필요없고 그냥 가져다 쓰기만 하면 된다면, useRecoilValue로 값을 가져와서 사용하면 된다. 쏘심플

 

나는 위 기능을 통해서 사용자 프로필 클릭에 따른 채팅방 화면 전환, 채팅 input에 따른 채팅 목록 구현까지 하였다.

redux보다 recoil이 백배는 더 간편한듯... 다들 recoil 하길

 

 

 

참고 ) recoil 정리한 벨로그 문서