상태 관리 라이브러리

상태 관리 라이브러리

: 애플리케이션의 상태(state)를 효과적으로 관리하고, 상태 변화에 따른 UI 업데이트를 쉽게 할 수 있도록 도와주는 도구

 

ex) Redux , Mobx, Context API, Recoil, Zustand

필요성

1. 복잡한 상태 관리

- User 상호작용이 많아, 여러 컴포넌트들이 서로 상태를 공유해야 하는 경우가 많음

- useState, useReducer로 상태 관리를 하기엔 복잡해지기에 라이브러리를 사용함

2. 일관된 상태 관리

- 앱 상태를 일관되게 유지 가능

- 상태 변화가 예측 & 추적 가능 > 디버깅 용이

3. 전역 상태 관리

- 앱의 여러 컴포넌트가 동일한 상태를 공유해야할 때 유용

- ex) 사용자 인증 정보, 테마 설정 등

4. 성능 최적화

- 필요한 부분만 리렌더링

5. 코드 구조 개선

- 상태 관리 로직을 컴포넌트에서 분리 > 가독성, 유지 보수성 용이

6. 협업 용이

- 상태 변화와 관련된 로직이 중앙화 되어있음

 

주요 개념

1. State

: 사용자 입력, 서버 응답, 로컬 데이터, UI 컴포넌트 간의 상호작용 등을 의미

2. Store

: 앱의 모든 상태를 보관하는 곳.

3. Action

: 상태를 변경하기 위해 발생시키는 이벤트. 상태 변화의 원인을 설명하는 객체.

4. Reducer

: 액션을 처리하여 새로운 상태를 반환하는 함수. 순수 함수여야함.

- 주어진 상태와 액션을 바탕으로 새로운 상태를 생성

5. Selector

: 저장소에서 특정 상태를 추출, 계산된 상태를 반환하는 함수.

Recoil (상태관리 라이브러리)

사용법 with Recoil

1. Recoil 설치

npm install recoil

2. RecoilRoot 설정

- Recoil 상태를 사용하려면 앱의 최상위 컴포넌트를 RecoilRoot로 감싸야함

// index.js 또는 App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

3. Atom 정의

- 상태는 `atom`으로 정의

- useState와 비슷하지만, 전역적으로 사용 가능한 것이 차이점

cf) atom : 상태의 단위

// atoms.js
import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // 각 atom의 고유 키
  default: '', // 초기 상태 값
});

4. Atom 사용

- 정의된 atom을 컴포넌트로 사용하려면 useRecoilState 훅을 사용

// TextInput.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { textState } from './atoms';

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>입력한 텍스트: {text}</p>
    </div>
  );
}

export default TextInput;

5. Selector 사용

- selector는 파생된 상태를 계산할 때 사용

ex) atom의 상태를 기반으로 다른 값을 계산 가능

// selectors.js
import { selector } from 'recoil';
import { textState } from './atoms';

export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

- 정의된 selector를 컴포넌트에서 사용하려면 useRecoilValue 훅을 사용

// CharacterCount.js
import React from 'react';
import { useRecoilValue } from 'recoil';
import { charCountState } from './selectors';

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <p>문자 수: {count}</p>;
}

export default CharacterCount;

정리

- Recoil을 사용하여 상태를 관리

- atom과 selector를 통해 상태를 쉽게 공유, 파생된 값을 계산

- 설정이 간단

- React와의 통합 용이