React 상태 관리 방법
React에서 상태 관리는 컴포넌트의 동적 데이터를 다루는 핵심적인 부분입니다. 각 상태 관리 방법은 특정한 사용 사례에 맞게 설계되어 있으며, 그에 따른 장단점이 있습니다.
1. useState
설명
- 가장 기본적인 React Hook으로, 함수 컴포넌트에서 상태를 관리할 수 있게 해줍니다.
예시
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>Count: {count}</p>
</div>
);
}장점
간단한 상태 관리에 적합하며 사용하기 쉽습니다.
컴포넌트 로컬 상태 관리에 최적화되어 있습니다.
단점
복잡한 상태 로직이나 여러 상태가 서로 의존하는 경우 관리가 어려울 수 있습니다.
사용 사례
간단한 UI 상태 값(예: 토글, 입력 필드 값) 관리에 적합합니다.
2. useReducer
설명
useState보다 더 복잡한 상태 로직을 관리할 때 사용되며, 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다.
예시
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, {count: 0});
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
);
}장점
복잡한 상태 로직을 외부에서 관리할 수 있어 컴포넌트 코드를 깔끔하게 유지할 수 있습니다.
액션을 통해 상태 변화를 예측하기 쉬워 디버깅에 유리합니다.
단점
상태 로직을 외부에 작성해야 하므로 초기 학습 곡선이 높을 수 있습니다.
사용 사례
여러 하위 값이 있는 복잡한 정적 로직을 다루거나, 다음 상태가 이전 상태에 의존하는 경우에 사용합니다.
3. Context API
설명
React 앱에서 전역적으로 데이터를 공유할 수 있는 방법을 제공합니다.
예시
const CountContext = React.createContext();
function App() {
const [count, setCount] = useState(0);
return (
<CountContext.Provider value={count}>
<Counter />
</CountContext.Provider>
);
}
function Counter() {
const count = useContext(CountContext);
return <div>{count}</div>;
}장점
전역 상태를 관리할 때 유용하며, prop drilling 없이 상태를 공유할 수 있습니다.
단점
React의 내장 기능이기 때문에 중앙집중식 상태 관리 시스템에 비해 세밀한 제어가 어렵습니다.
사용 사례
테마, 사용자 선호도, 인증 상태 같은 앱 전역 데이터를 관리할 때 사용합니다.
4. Redux
설명
애플리케이션의 상태를 저장하는 중앙 저장소를 제공하는 자바스크립트 라이브러리입니다.
예시
const initialState = {count: 0};
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
}
const store = createStore(reducer);장점
애플리케이션의 상태 변화를 예측하기 쉽고 관리하기 쉽습니다.
미들웨어, 타임 트래블 디버깅, 핫 리로딩 등 고급 기능을 지원합니다.
단점
설정과 보일러플레이트 코드가 많아질 수 있습니다.
작은 프로젝트에는 과도한 구조일 수 있습니다.
사용 사례
대규모 애플리케이션의 상태 관리, 여러 컴포넌트 간 상태 공유가 필요한 경우 사용합니다.
5. MobX
설명
애플리케이션 상태를 관리하기 위한 라이브러리로, 반응형 프로그래밍 패러다임을 따릅니다.
예시
class CounterStore {
@observable count = 0;
@action increment() {
this.count++;
}
@action decrement() {
this.count--;
}
}장점
상태 변화를 자동으로 감지하여 UI를 업데이트합니다.
코드가 간결하고 이해하기 쉽습니다.
단점
React와의 결합도가 높지 않아 다른 라이브러리보다 커뮤니티 지원이 약할 수 있습니다.
사용 사례
중소 규모 애플리케이션에서 효율적인 상태 관리가 필요한 경우 사용합니다.
총 정리
| 기법/도구 | 설명 | 예시 |
|---|---|---|
useState | React의 가장 기본적인 상태 관리 훅입니다. 함수 컴포넌트 내에서 상태를 생성하고 업데이트할 수 있습니다. | const [count, setCount] = useState(0); |
useReducer | useState보다 복잡한 상태 로직을 관리할 때 사용합니다. 상태 업데이트 로직을 컴포넌트 외부에 배치할 수 있으며, 액션에 따라 상태를 업데이트합니다. | const [state, dispatch] = useReducer(reducer, initialState); |
| Context API | React 앱의 다양한 컴포넌트에 걸쳐 상태를 공유할 때 사용합니다. Provider 컴포넌트를 사용해 하위 컴포넌트에 상태를 전달할 수 있습니다. | <MyContext.Provider value={/* 상태 값 */}> |
| Redux | 복잡한 애플리케이션의 상태 관리를 위해 사용되는 라이브러리입니다. 애플리케이션 전역 상태를 하나의 스토어로 관리합니다. | const store = createStore(reducer); |
| MobX | 관찰 가능한 상태, 계산된 값, 액션을 사용하여 상태 관리를 수행합니다. 간결하고 효율적인 리액티브 상태 관리를 제공합니다. | @observable count = 0; |
| Recoil | React에 특화된 상태 관리 라이브러리입니다. 컴포넌트 간 상태 공유, 비동기 처리, 상태 기반 렌더링 등을 쉽게 구현할 수 있습니다. | const [text, setText] = useRecoilState(textState); |
