[React JS 마스터클래스] Chapter #5 State Management

[beecomci]

📌 Recoil

• React에서 사용하는 state management 라이브러리
• 미니멀하고 간단해서 사용하기 쉬움

State Management Before Use Recoil

• Recoil을 사용하지 않고 global state로 관리하려면, 상위에서 하위에 해당 state를 사용하는 모든 컴포넌트에 state를 내려줘야 하는 불편함
• 현재 코드 상으로는 Toggle Mode 버튼이 Header 컴포넌트에 위치해야 함
• 하지만 global한 state 관리를 위해서 App에서 isDark state를 두어야 하고, 버튼 클릭시 모드가 변경되게 하기 위해서는 toggleDark 함수를 App -> Router -> Header로 props로 전달 해야 함
• 2단계 아래로 props를 전달해야 하는 불편함
• 심지어 Chart 컴포넌트에서 차트의 다크모드 여부를 알기 위해서는 App -> Router -> Exchange -> Chart로 무려 3단계나 isDark state를 전달해야함... 매우 비효율적

global state

• global state는 어플리케이션이 특정 value에 접근해야 할 때 컴포넌트가 어디있던지 누가 접근하고자 하는지 상관없이 쓰임
• 어플리케이션 전체에서 공유되는 값
• 로그인 여부?

State Management After Use Recoil

• Recoil을 사용해서 부모가 자식에게 props로 내려주는 계층 구조 대신에 state를 어떤 곳에 두고 컴포넌트 어디서든 접근 가능하도록 할 수 있음
• state를 수정하고 싶다면 어떤 곳에 있는 state를 수정하면 됨

Recoil

// 1. index.tsx
import { RecoilRoot } from "recoil";

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

// 2. atoms.ts
// atom 정의
import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: false
});

// 3. App.tsx
// atom 연결
import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./routes/atoms";

const isDark = useRecoilValue(isDarkAtom);

• https://recoiljs.org/ko/
• 위에서 말한 state를 두는 어떤 곳을 Recoil에서는 Atom이라 부름
• atom에는 내가 원하는 각기 다른 state 넣을 수 있고 특정 컴포넌트에 종속되지 않고 컴포넌트에서 value가 필요하면 직접 atom과 연결해서 받아오면 됨
• global state를 어플리케이션의 분리된 공간에서 관리하는 것이 훨씬 나은 방법 -> value가 필요한 컴포넌트만 value를 가지게 됨