useContext와 useReducer는 React의 훅(Hook) 중에서 상태 관리와 관련된 훅이다. 이 두 훅은 컴포넌트의 상태 관리를 효율적으로 할 수 있도록 도와주지만, 사용 목적과 방식에 있어서 차이가 있다.
useContext 훅은 React의 Context API를 함수형 컴포넌트 내에서 사용할 수 있게 해주는 훅이다. Context API는 전역적으로 데이터를 공유할 수 있는 방법을 제공한다. (Props 드릴을 안하기 위해...) 예를 들어, 사용자의 로그인 정보, 테마 설정, 언어 설정 등을 애플리케이션의 여러 레벨에 걸쳐 공유할 수 있다. useContext 훅을 사용하면, 컴포넌트 트리으 ㅣ깊은 곳에 있는 컴포넌트도 props를 일일이 전달하지 않고도 Context의 값을 직접 사용할 수 있다.
useReducer 훅은 복잡한 컴포넌트의 상태 로직을 관리할 때 useState보다 더 적합한 방법을 제공한다. 이 훅은 Redux의 리듀서(reducer)와 유사한 패턴을 사용한다. 리듀서는 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환하는 함수이다. useReducer는 상태 관리 로직을 컴포넌트 밖으로 분리할 수 있게 해주어, 상태 업데이트 로직을 더 예측 가능하게 만들어 준다. 특히 하위 값이 있는 복잡한 상태 객체를 다룰 때, 또는 다음 상태가 이전 상태에 의존적일 때 유용하다.
정리하면 useReducer는 복잡한 상태 업데이트 로직을 구성 요소로부터 분리하는데 유용하며, 특히 여러 상태를 동시에 업데이트 해야 하거나, 이전 상태에 기반하여 다음 상태를 계산해야 하는 경우 적합하다. 이는 코드의 가독성과 유지보수성을 향상시키는 데 도움을 준다.
반면, Context API는 React 애플리케이션 내에서 전역적으로 상태를 공유하고자 할 때 유용하다. Context를 사용하면 특정 상태를 필요로 하는 모든 컴포넌트에 걸쳐서 상태를 쉽게 전달하고 접근할 수 있다. 이는 "props drilling"이라고 불리는, 상태를 매개변수로 여러 단계의 컴포넌트에 거쳐 전달하는 번거로움을 해결해준다.
Hooks은 (함수들은) 값의 재사용이 아니라, 로직의 재사용을 위한 것이다.
'React' 카테고리의 다른 글
| [React Project] ⚡Youtube App 만들기 (0) | 2024.06.09 |
|---|---|
| Tanstack Query 옵션에 대한 (0) | 2024.05.17 |
| 이중괄호로 데이터를 보내는 이유 (0) | 2024.05.09 |
| useEffect (0) | 2024.04.24 |
| input태그와 onChange함수의 관계 (1) | 2024.04.23 |