context api, redux, mobx, swr

props drilling

리액트는 props 를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨준다. 컴포넌트가 바로 연결되어 있다면 좋겠지만 작업을 진행하다보면 여러 컴포넌트를 거쳐 데이터를 넘겨줘야 할 때도 있다. 이걸 props drilling 이라고 부른다.

global state

props drilling 을 피해 데이터를 컴포넌트에 전달하는 것을 말한다. context api, redux, mobx, swr 등을 이용해 설정할 수 있다.

Context API

react 에서 제공하는 기능이므로 다른 라이브러리들과 달리 설치하지 않고 사용할 수 있다.
createContext로 만들어 관리하고자 하는 state를 객체로 담아준다.

import { createContext } from 'react'

export const GlobalContext = createContext({
  name: "",
  setName : (_) => {}
})

이렇게 설정한 state 들을 useState 로 다시 받아준다.

const [name, setName] = useState("aaa")

_app.tsx 의 return 부분을 .Provider 로 감싸준다.

<GlobalContext.Provider value={{name, setName}}>

</GlobalContext.Provider>

그리고 사용할 페이지에서 context 가 만들어진 페이지를 import 해준 뒤

const {
  name, setName
} = useContext(GlobalContext)

로 사용할 수 있다.

하지만 단점은 state 변경되면 이 값을 갖고 있는 모든 곳에 리렌더링이 일어나난다는 것이다.

Redux

flux를 바탕으로 하는 상태 관리 라이브러리다. 많은 사람들이 사용하지만 코드 작성이 복잡하다는 단점이 있다.

https://ko.redux.js.org/

Mobx

상태 관리 라이브러리다.

https://mobx.js.org/

SWR

Stale While Revalidate 의 축약으로 상태 관리 라이브러리다.