[React/Next.js] Recoil

1. Recoil

- React를 위한 상태관리 라이브러리

- Atom 상태 단위로 관리하며 컴포넌트는 Atom을 구독하면됨.

 

2. 설치 

npm i recoil

 

 

3. RecoilRoot

- Recoil 을 사용하는 컴포넌트를 <RecoilRoot>로 감싸준다.

- Next.js 예시 (_app.tsx)

// _app.tsx

import {RecoilRoot} from "recoil";

const App = ({Component, pageProps}: AppProps) => {
    return (
        <RecoilRoot>
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </RecoilRoot>
    )
}
export default App;

 

4. Atom 선언

- 컴포넌트에서 write/read 되는 상태값

- 컴포넌트는 Atom을 구독하며, 값 변경 시 컴포넌트를 리렌더링 시킴.

//RecoilStatus.ts

import {atom} from 'recoil'

export const isLoginState = atom({key: 'isLogin', default: false})

 

5. Recoil 사용

( 1 ) useRecoilState();

- Atom 상태를 변경하고 읽음.

const [loginState, setLoginState] = useRecoilState(Atom);

//Component

import {isLoginState} from "../interfaces/RecoilStatus";

const LoginCheck = () => {
    const [loginState, setLoginState] = useRecoilState(isLoginState);
    
    const onChange = (e) => {
        setLoginState(e.target.value);
    }
    
    return(
        <div>
            <input type="text" value={login} onChange={onChange} />
        </div>
    )
}
export default LoginCheck

 

(2) useSetRecoilState() - useRecoilValue()

- useRecoilValue(Atom) :  상태를 읽음

- useSetRecoilState(Atom) : Atom 상태를 변경 

const loginState = useRecoilValue(Atom);
const setLoginState = useSetRecoilState(Atom);

//Component

import {isLoginState} from "../interfaces/RecoilStatus";

const LoginCheck = () => {
    const loginState = useRecoilValue(isLoginState);
    const setLoginState = useSetRecoilState(isLoginState);
    
    const onChange = (e) => {
        setLoginState(e.target.value);
    }
    
    return(
        <div>
            <input type="text" value={loginState} onChange={onChange} />
        </div>
    )
}
export default LoginCheck

 

(3) useResetRecoilState ()

- Atom 값을 default 로 변경