useReducer

 

 

useReducer 도 자주 쓰는 useState와 같이 새로운 state를 생성하는 Hook 이다.

 

useState	useReducer
새로운 state 생성 state를 업데이트 시키는 함수 제공
컴포넌트 내부에 state 관리 로직을 작성해야 함	컴포넌트 외부에 state 관리 로직 분리 가능

 

useState 예시

inport { useState } from "react";

export default function App() {
const [ count, setCount ] useState(0); // 이렇게 App 컴포넌트 안에 작성되어야 하며
// 상태관리 로직들이 복잡해지고 길어지게 되면 App 컴포넌트 내부에 코드가 길어지고 가독성이 떨어지게 됨

return <> ... </> ;

}

 

그래서 프로젝트에 복잡한 상태관리를 진행하게 된다면 useState보다 useReducer를 사용하는 게 나을 듯하다

 

 

 

 

 

 

reference.

프로젝트로 배우는 React.js&Next.js 마스터리 클래스.이정환(2023.09)