게시판 만들기 (2) (Recoil 설정하기)

이번 프로젝트에서 사용하기로 한 상태관리 라이브러리는 recoil 입니다.

그동안은 redux만을 사용해보았는데, 이번엔 recoil을 사용해보고 싶어서 사용해보기로 했습니다.

자주 하지 않은 업데이트, 메모리 누수.. 등 다양한 단점들이 존재하여 현재 Redux에 비해 매우 사용률이

저조하긴 하지만 그래도 react서 만든 것이기 때문에 한번쯤은 사용해볼 가치가 있다고 생각합니다.

(devtools가 없어 개발자도구에서 확인이 불가능하여 매우 불편한점은.... 매우 불편...)

그래도 초기 세팅 및 사용법이 엄-청 간편하기 때문에 빠르게 작성하여 진행할 수 있다는 장점이 있습니다.

---

// src/recoil/user.ts

import { atom } from 'recoil'

export const sessionState = atom({
  key: 'session',
  default: {
    state: false,
    email: '',
    nickname: '',
    mobile: '',
    sessionToken: '',
    refreshToken: ''
  }
})

export const userState = atom({
  key: 'user',
  default: {
    email: '',
    nickname: '',
    profileImage: ''
  }
})

export const registerInfoState = atom({
  key: 'registerInfo',
  default: {
    email: '',
    password: '',
    nickname: '',
    mobile: ''
  }
})

 

우선 회원가입 및 유저정보를 저장하는 간단한 상태저장 코드를 만들었습니다.

이렇게만 atom으로 state를 설정하면 이제 사용준비가 거의 끝났다는게 사실입니까!?

그럼한번 사용해보러 가보겠습니다.

 

그 전에! Devtools가 없는 recoil의 상태확인을 수시로 확인해보고 싶은 답답함을 해결하기 위해,

custom hook을 하나만들어 필요한 페이지에 붙여다 써서 확인해보겠습니다.

// src/hooks/useRecoilLogger.ts


import { useEffect } from 'react'
import { useRecoilValue } from 'recoil'
import { sessionState, userState, registerInfoState } from 'src/recoil/user'

export function useRecoilLogger() {
  const session = useRecoilValue(sessionState)
  const user = useRecoilValue(userState)
  const registerInfo = useRecoilValue(registerInfoState)

  useEffect(() => {
    console.log('Recoil State:', {
      session,
      user,
      registerInfo
    })
  }, [session, user, registerInfo])
}

 

자 그럼 이제 이걸 로그인 페이지에 작성하여 확인해보겠습니다.

위 함수의 사용법은 아시다시피 간단하게 

useRecoilLogger() 를 사용하시면 됩니다.

 

이렇게 잘나오는걸 확인할 수 있습니다.

 

이제 로그인화면에서의 아이디 비밀번호를 어떻게 recoil state에 저장하는 지만 알아보겠습니다.

import { sessionState } from 'src/recoil/user';
import { useRecoilState } from 'recoil';

... 

const [session, setSessionState] = useRecoilState(sessionState);

...


return (
	<input
    	value={session.email}
        onChange={(event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
            setSessionState(prev => ({
              ...prev,
              email: event.target.value
            }))
          }
    />
)

...

 

 

잘 저장이 되는걸 확인할 수 있습니다.

 

다음 글에는 이제 API 연결을하여 필요한 정보들을 저장하고 사용하는 블로그로 뵙겠습니다.