React 에서 상태관리하는 방법

React Redux

React Redux는 React 어플리케이션에서 상태 관리를 위한 상태 관리 라이브러리입니다. React Redux를 사용하면 React 컴포넌트에서 상태를 더 효과적으로 관리하고, 애플리케이션의 상태 변화를 예측 가능하게 처리할 수 있습니다.

React Redux는 주로 Redux라는 상태 관리 패턴과 라이브러리와 함께 사용됩니다. Redux는 애플리케이션의 전역 상태를 단일 저장소(store)에 저장하고, 이를 컴포넌트 간에 공유하여 상태 관리를 용이하게 해줍니다.

1. 중앙화된 상태 관리: Redux는 상태를 중앙화된 저장소에 저장하고 관리합니다. 어플리케이션의 다양한 컴포넌트 간에 상태를 전달하는 복잡한 로직을 피할 수 있습니다.
2. 예측 가능한 상태 변화: Redux는 상태 변화를 예측 가능하게 만들어 줍니다. 액션(Action)을 통해 상태를 변경하며, 이러한 액션들은 순차적으로 처리되어 예측 가능한 상태 변화를 보장합니다.
3. 시간 여행(Debugging): Redux DevTools를 사용하여 상태 변화를 시각적으로 확인하고, 과거의 상태로 시간 여행하여 버그를 디버깅할 수 있습니다.
4. 유지보수성 및 확장성: Redux의 구조는 컴포넌트와 상태를 분리시켜 유지보수성을 높이고, 복잡한 애플리케이션의 상태 관리를 용이하게 만들어 줍니다.

React Redux의 사용 방법

1. 액션(Action) 정의: 상태를 변경하기 위한 작업들을 액션으로 정의합니다.
2. 리듀서(Reducer) 정의: 액션에 따라 상태를 어떻게 변경할지를 정의하는 리듀서 함수를 작성합니다.
3. 스토어(Store) 생성: 리듀서를 사용하여 Redux 스토어를 생성하고 초기 상태를 정의합니다.
4. 컴포넌트 연결: connect 함수를 사용하여 React 컴포넌트를 Redux 스토어에 연결합니다. 이를 통해 컴포넌트는 스토어의 상태에 접근하고 액션을 디스패치(dispatch)할 수 있게 됩니다.

React Redux는 복잡한 상태 관리를 단순화하고 애플리케이션의 유지보수성을 향상시키는데 큰 도움을 줍니다. Redux와 함께 React를 사용하면, 더욱 효율적이고 예측 가능한 상태 관리를 구현할 수 있습니다.

Recoil

Recoil은 페이스북에서 개발한 상태 관리 라이브러리로, React 어플리케이션에서 컴포넌트 간의 상태를 효율적으로 관리하기 위한 도구입니다. Redux와 같은 전통적인 상태 관리 라이브러리와는 다르게, Recoil은 리액트의 상태 업데이트 및 공유를 더 간단하게 만들어주는 특징을 가지고 있습니다.

1. 원자성 상태(Atom): Recoil에서는 상태를 원자성 단위인 '원자'로 관리합니다. 이는 상태를 더 작은 단위로 분할하고, 필요한 곳에서 필요한 만큼의 상태만 사용할 수 있도록 도와줍니다.
2. 선언적 상태 관리: Recoil은 선언적인 방식으로 상태를 정의하고 사용할 수 있습니다. 상태를 정의하고 구독(subscribe)할 때 많은 boilerplate 코드를 줄여줍니다.
3. 다이나믹한 의존 관계: Recoil에서는 컴포넌트 간의 상태 의존 관계를 동적으로 설정할 수 있습니다. 필요한 상태에 대한 의존성을 자동으로 추적하여 해당 상태의 변경 시점에 자동으로 리렌더링됩니다.
4. 비동기 상태 관리: 비동기적인 데이터 흐름과 처리를 더욱 편리하게 다룰 수 있도록 지원합니다.
5. 효율적인 렌더링: Recoil은 불필요한 리렌더링을 최소화하고, 상태 의존성을 고려하여 필요한 부분만 업데이트합니다.

Recoil의 사용 방법

1. 상태 정의: **atom**이라 불리는 상태를 정의합니다. 이는 컴포넌트 간에서 공유하고 사용할 상태를 의미합니다.
2. 상태 사용: 컴포넌트에서 **useRecoilState**나 **useRecoilValue**와 같은 훅을 사용하여 Recoil 상태를 읽거나 수정합니다.
3. 상태 의존성 설정: **selector**를 사용하여 상태의 의존 관계를 동적으로 설정하고, 필요한 부분만 업데이트되도록 합니다.

Recoil은 Redux와 같은 기존의 상태 관리 라이브러리와 비교하여 더욱 직관적이고 간결한 상태 관리를 지향합니다.

import {atom} from 'recoil';

export const modalState = atom({
	key: 'modalState',
	default: false,
});

import {useRecoilState} from 'recoil';
import {modalState} from '../store/atoms';

function List({data}) {
	const [madalOpen, setModalOpen] = useRecoilState(modalState);
	
	const handleRegister = () => {
		setModalOpen(true);
	}

	return (
		<button onClick={handleRegister}>상품 추가</article>
		{modalOpen && (<RegisterModal />)}
	);
}

function RegisterModal() {
	const [modalOpen, setModalOpen] = useRecoilState(modalState);

	const handleCancel = () => {
		setModalOpen(false);
	}
}

React Query

React Query는 React 애플리케이션에서 데이터 관리와 상태 관리를 용이하게 해주는 라이브러리입니다. 주로 API 호출 및 비동기 데이터를 처리하고 캐싱하는데 사용되며, 선언적인 방식으로 데이터를 가져오고 업데이트할 수 있도록 도와줍니다. React Query는 특히 서버 데이터와 상호작용하는 컴포넌트의 개발을 단순화하고 최적화하는 데 도움이 됩니다.

1. 선언적 데이터 요청: **useQuery**와 같은 훅을 사용하여 선언적인 방식으로 데이터를 요청할 수 있습니다. 필요한 데이터 요청과 로직을 컴포넌트 내에 명시적으로 작성할 수 있습니다.
2. 자동 캐싱: React Query는 데이터를 자동으로 캐싱하여 동일한 데이터 요청을 최적화합니다. 이로써 중복 요청을 방지하고 애플리케이션 성능을 개선할 수 있습니다.
3. 비동기 데이터 업데이트: useMutation 훅을 사용하여 API 호출 및 데이터 업데이트를 쉽게 처리할 수 있습니다.
4. 최적화된 리렌더링: React Query는 컴포넌트 내에서 사용되는 데이터의 상태 변화를 감지하여 필요한 부분만 리렌더링되도록 합니다.
5. 인터벌 데이터 폐기: 자동 캐싱 및 갱신 기능을 사용하여 일정 시간마다 데이터를 자동으로 갱신할 수 있습니다.
6. Prefetching 및 Background Fetching: 미리 데이터를 가져오거나 백그라운드에서 데이터를 가져오는 기능을 제공합니다.
7. 서버 상태 업데이트 리스닝: 실시간 데이터 변경을 처리하고 다시 가져올 수 있는 편리한 기능을 제공합니다.

React Query의 사용 방법

1. 데이터 요청: useQuery 훅을 사용하여 데이터를 요청하고 가져옵니다.
2. 데이터 업데이트: useMutation 훅을 사용하여 데이터를 업데이트하고 서버에 변경을 요청합니다.
3. 캐싱 및 리렌더링: React Query가 데이터를 캐싱하고, 변경 사항을 감지하여 컴포넌트를 필요한 부분만 리렌더링합니다.

React Query는 React 애플리케이션의 데이터 관리를 더욱 간결하고 효율적으로 만들어 주는 도구로서, 특히 API 호출과 비동기 데이터 처리에 유용합니다.