useReducer는 리듀서 함수와 초기 상태를 인자로 받아, 현재 상태와 상태를 업데이트하기 위한 디스패치 메소드를 반환합니다. 리듀서 함수는 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다.
이 예제에서 reducer 함수는 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환합니다. dispatch 함수는 액션 객체를 reducer에 전달하여 상태를 업데이트하는 역할을 합니다.
useReducer는 상태 관리 로직을 컴포넌트 외부로 분리하고, 여러 상태 값이 서로 연관되어 있거나, 다음 상태가 이전 상태에 의존적인 경우에 유용합니다.
useState와 useReducer는 React의 Hook이며 둘 다 컴포넌트의 상태를 관리하는 데 사용됩니다. 둘 사이의 주요 차이점은 어떤 상황에서 어떤 것이 더 적합한가와 관련이 있습니다.
useState: 이 Hook은 상태 값을 간단하게 설정하거나 업데이트하는 데 사용됩니다. 주로 단일 값 또는 단순한 상태 객체를 관리할 때 사용됩니다.
useState는 간단한 상태 업데이트를 처리하는 경우에 적합합니다. 그러나 상태가 복잡해지거나, 상태의 다음 값이 이전 값에 의존적인 경우, 또는 여러 상태 값들이 서로 연관되어 있을 경우에는 useState를 사용하여 로직을 관리하는 것이 어려울 수 있습니다.
useReducer: 이 Hook은 복잡한 상태 로직을 관리하는 데 사용됩니다. useReducer는 현재 상태와 액션을 인자로 받는 리듀서 함수를 사용합니다. 이 함수는 새로운 상태를 반환합니다. 또한 useReducer는 액션을 디스패치하는 함수를 반환하여, 이를 통해 상태를 업데이트합니다.
useReducer는 상태 관리 로직을 컴포넌트 외부로 분리할 수 있고, 여러 상태 값이 서로 연관되어 있거나, 다음 상태가 이전 상태에 의존적인 경우에 유용합니다.
따라서, useState와 useReducer의 선택은 상황에 따라 달라집니다. 간단한 상태 업데이트는 useState로 충분히 처리할 수 있지만, 상태 업데이트 로직이 복잡해지면 useReducer를 사용하는 것이 더 효과적일 수 있습니다.
'React' 카테고리의 다른 글
| Redux Thunk 미들웨어 (0) | 2023.06.12 |
|---|---|
| 모듈 export 2가지 방법 (0) | 2023.06.11 |
| useMemo vs useCallback (0) | 2023.06.10 |
| onClick= {함수명} VS onClick= {함수명()} VS onClick = { ()=>함수명()} (0) | 2023.05.20 |
| useState의 초기값은 콜백함수로 설정하자 (1) | 2023.05.19 |