React의 상태 관리: useState, useReducer, useRef를 언제 사용할까?
2024-10-11 08:12:31React 상태 관리의 기초 이해하기
React는 인기 있는 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 설계되었습니다. 이 과정에서 상태(state) 관리가 매우 중요한 역할을 합니다. 이 글에서는 상태 관리에 필수적인 세 가지 훅인 useState, useReducer, useRef의 각각의 용도와 가장 적합한 사용 사례를 자세히 살펴보겠습니다.
1. useState: 간단한 상태 전환 처리
useState는 React에서 상태를 관리하기 위한 가장 간단한 훅입니다. 다음 상태가 이전 상태에 의존하지 않는 간단한 상황에서 잘 작동합니다.
사용 사례:
- 로컬 폼 값
- 토글 기능 (예: 보이기/숨기기, 활성화/비활성화)
- 복잡한 로직이나 깊은 업데이트가 필요 없는 간단한 상태
예시 코드:
function ToggleComponent() {
const [isToggled, setToggle] = useState(false);
return (
<button onClick={() => setToggle(!isToggled)}>
{isToggled ? 'ON' : 'OFF'}
</button>
);
}
위의 코드는 버튼을 클릭할 때 isToggled 상태를 변경합니다. 이처럼 단순한 토글 기능은 useState로 쉽게 처리할 수 있습니다.
2. useReducer: 복잡한 상태 로직 관리
useReducer는 상태가 이전 상태에 의존하거나, 복잡한 로직을 포함한 경우에 더 적합한 훅입니다. 여러 개의 하위 값이나 여러 이전 상태의 조합에 따라 상태를 업데이트해야 할 때 유용합니다.
사용 사례:
- 복잡한 폼이나 사용자 입력 처리
- 이전 상태에 의존하는 상태
- 서로 밀접하게 연관된 여러 상태 관리
예시 코드:
function Counter() {
const [state, dispatch] = useReducer((state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}, { count: 0 });
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
위의 카운터 컴포넌트는 dispatch를 통해 상태를 변경합니다. 복잡한 로직이나 여러 상태가 연결된 경우 useReducer를 이용하면 깔끔하고 관리하기 쉬운 코드 작성을 할 수 있습니다.
3. useRef: DOM 노드 접근 및 가변 값 저장
useRef는 DOM 노드에 직접 접근하거나 컴포넌트의 생애 주기 동안 가변 값을 보존하는 데에 사용됩니다. 이는 단순한 참조 이상의 유용한 기능을 제공합니다.
사용 사례:
- 포커스, 텍스트 선택, 미디어 재생 관리
- 명령형 애니메이션 트리거
- 업데이트 시 리렌더링을 유발하지 않는 가변 값 저장
예시 코드:
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
위의 예제에서는 useRef를 사용하여 입력 필드에 포커스를 맞추는 버튼을 구현합니다. 이러한 패턴은 사용자가 직접 DOM을 조작해야 할 때 유용합니다.
4. 상태 관리 훅 선택하기
React에서 적절한 상태 관리 훅을 선택하는 것은 상태의 복잡성과 다른 상태나 컴포넌트 생애 주기와의 상호작용에 따라 달라집니다. useState는 간단한 상태에, useReducer는 복잡한 상태 상호 작용에, useRef는 참조와 가변 데이터를 관리하는 데 적합합니다.
5. 최종 결론
각 React 훅을 언제, 왜 사용해야 하는지를 이해하는 것은 코드의 가독성을 높이고 유지보수 및 디버깅을 쉽게 합니다. 이러한 훅을 활용하여 React 애플리케이션에서 효과적으로 상태를 관리할 수 있는 방법을 모색해보세요.
참고 자료
상태 관리에 대한 깊은 이해는 나중에 더 복잡한 애플리케이션을 개발할 때 매우 유용하며, 다양한 방식으로 애플리케이션의 성능을 극대화할 수 있습니다. 이제 여러분도 각 훅의 사용 사례를 바탕으로 React 애플리케이션 개발에 임해보세요!