Recoil을 이용한 전역 상태관리

Recoil은 React 상태 관리 라이브러리 중 하나 입니다.

 

recoil을 이용하면 전역으로 상태(특정 시간에서의 조건이나 정보) 관리할 수 있어

로그인 후 사용자 정보나

여러 컴포넌트에 최신으로 제공되어야하는 공통 정보를 유지하는데 이용이 가능합니다.

 

 

react의 렌더링 특성을 잘 활용하여 효율적인 리렌더링을 제공해주므로

아래 몇 가지에 대한 정보만 파악해도 쉽게 사용 가능합니다.

Atom: 앱의 상태를 정의하는 단위
Selector: 파생된 상태를 만들어내는 함수, 다른 Atom이나 Selector로부터 값을 받아 계산

Recoil Hook 종류
useRecoilValue: Atom 값 읽음 (상태 업데이트 트리거 하지 않음)
useSetRecoilState: Atom 값을 업데이트 하는 setter 함수를 반환
useResetRecoilState: Atom 값을 초기화

 

 

기존에 React나 Nextjs 프로젝트를 하면서

아래와 같이 사용자 정보를

localStorage를 사용해서 다른 컴포넌트에서 이용하였습니다.

localStorage.setItem("uid", "") //사용자정보 로컬 저장
localStorage.setItem("sso", "") //사용자정보 로컬 저장

 

위와 같이 저장한 데이터를 불러오려면

window 객체의 속성을 통해서 localStorage에 접근가능하기 때문에

useEffect를 이용하여 랜더링 되기 전에 아래와 같이 사용을 했습니다.

useEffect(() => {
     if (typeof window !== "undefined") {
         uid = localStorage.getItem("uid") || uid
     }
}, [])

 

 

하지만 아래와 같이 recoil을 이용하면 간편하게 사용할 수 있습니다.

 

1) 아래와 같이 recoil을 불러온 다음, 전역 설정을 해줍니다.

import {RecoilRoot} from "recoil";

function MyApp({Component, pageProps}: AppProps) {
    function kakaoInit() { // 페이지가 로드되면 실행
        window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_KEY);
        console.log(window.Kakao.isInitialized());
    }

    const {session} = pageProps
    let component =
        <RecoilRoot>
            <SessionProvider session={session}>
            <AppLayout>
            <Global styles={globalStyles}/>
            <Component {...pageProps} />
            </AppLayout>
            </SessionProvider>
        </RecoilRoot>
    return component
}

export default MyApp

 

2) 전역 상태관리하고 싶은  정보 단위를 묶어서 아래와 같이 정의합니다.

export interface LoginUserInfo{
    cifNo?: string,
    nime?: string,
    univZipCd: string,
    sso: string
}

export const userState = atom<LoginUserInfo>({
    key: "user",
    default: {
        cifNo: "",
        nime: "",
        univZipCd: "",
        sso: "N",
    },
})

 

3) 저는 로그인 후에 여러 컴포넌트에 필요한 사용자 정보 일부를 아래와 같이

전역 상태로 저장하고 있습니다.

import {useSetRecoilState} from "recoil";
import {userState} from "@atoms/index";

const loginUserState = useSetRecoilState(userState)

loginUserState({cifNo: data.cifNo, nime: onUser.nime, sso: onUser.sso as string, univZipCd: univ})

 

4) 위와 같이 정의해둔 정보는 알아서 상태 관리를 해주기 때문에

어디에서나 바로 호출해서 사용하면 됩니다.

const loginUserState = useRecoilValue(userState)


return (
        <Container>
            <div css={formScrollStyles}>
                <div>{loginUserState.nime}</div>
                ...

 

 

여러 컴포넌트에서 사용해야할 정보라면

매번 통신하거나 불필요한 코드를 추가하면서 호출하지말고 recoil을 이용 해보세요.