React 전역 상태(state) 관리 라이브러리 Recoil

전역 상태(state) 관리 라이브러리인 Recoil을 소개하고자 한다.

global state management library

필요성

React는 자체적으로 component마다 state라는 변수를 활용해 자신의 상태를 관리한다.

특히, React hooks에서는 useState라는 함수를 사용하여 state를 관리한다.

 

한 component에서 보면 이런 state 관리가 완벽한 것 같지만,

우리는 여러 component로 web application을 만든다.

 

즉, component 간의 state 공유가 필요하다는 것이다.

 

그런데, React의 component 구조 특성상,

부모 component가 자식 component에게 state 및 정보를 전달하는 건 아래와 같이 매우 쉽다.

const 부모 = (props)=>{
	const [state, setState] = useState("")
	return (
		<자식 parentState={state} />
	)

}

 

하지만 자식 component가 부모 component에게 state 및 정보를 전달하는 건 어렵다.

그래서 보통 아래와 같이 root 부모의 state를 object로 선언하고 모든 component들이 root의 setState를 받아서 그것을 통해서 자식 component의 정보를 부모 component로 전달하는 것이다. (이것도 완벽한 해결책이 아닐 수 있다. 적어도 나는 그렇게 했다.)

const Root = (props) => {
  const [rootState, setRootState] = useState({})
  return(
    <자식 methodNoteChildData={setRootState} rootState={rootState} />
  )
}

const 자식 = (props) =>{
  let childData
  /*
  do something
  */
  props.setRootState(...rootState, childData:"changed data")
  return(
    <p>자식</p>
  )
}

 

그러나 이제 전역 State 관리가 가능한 Recoil을 쓰면 이런 불필요한 code를 더 이상 치지 않아도 된다!

 

Recoil 소개

모든 state를 한. js 파일에 선언하고 다른 component에서 마음대로 import 하여 전역으로 state를 쓸 수 있는 환상적인 state management library이다!

 

root state를 사용할 때 보다, 불필요하게 쳐야 하는 code 수가 줄어들고 보기 더 간단해진다.

또, 모든 state를 코드적으로 그리고 시작적으로 확인할 수 있기 때문에 전체 web application을 이해하는데 더 도움이 된다!

 

약간 local DB를 보는 느낌이랄까?

 

Recoil 사용법

정말 간단하다!

 

1. state.js 파일을 만들고 전역 state를 선언한다
2. index.js 등에 가서 App component가 랜더링 될 때, RecoilRoot로 감싼다.
3. 다른 component에 가서 useState를 useRecoilState로 바꾸고 마음껏 쓴다.

state.js :

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil"

const whereState = atom({
  key: "where",
  default: "home",
})

const loginState = atom({
  key: "login",
  default: false,
})

const isDoctorState = atom({
  key: "isDoctor",
  default: false,
})

const isDashState = atom({
  key:"isDash",
  default:false
})

export { whereState, loginState, isDoctorState,isDashState }

 

index.js :

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil"

ReactDOM.render(
  <RecoilRoot>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </RecoilRoot>,
  document.getElementById("root")
)

 

App.js (전역 state를 쓰고 싶은 다른 함수들):

import React, { useState, useEffect } from "react"
import {
  Route,
  Link,
  BrowserRouter,
  Switch,
  useHistory,
} from "react-router-dom"

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil"

import { loginState } from "./state"

function App() {
  const [isLogin, setIsLogin] = useRecoilState(loginState)

  return (
    <div className='App'>
      <header className='App-header'>
      <BrowserRouter>
        <Switch>
          <Content />
        </Switch>
        <Header isLogin={isLogin}/>
      </BrowserRouter>
      </header>
    </div>
  )
}

 

포스팅하면 느낀 점

전역 상태 관리가 왜 필요한 건지 조금 구체적으로 설명하지 못한 것 같다.

다음에 이에 관해 더 자세히 조사하여 추가로 포스팅해야겠다.

 

참고한 자료:

Recoil