useReducer와 상태 관리

로이·2024년 5월 5일

한 입 크기로 잘라먹는 리액트

목록 보기

9/12

useReducer 이해하기

리액트 훅 useReducer를 이용하면 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있음

실습 준비하기

// TestComp.js

import { useState } from "react";

function TestComp() {
	(...)
}
export default TestComp;

상태 변화 코드란?

상태 변화 코드란 State 값을 변경하는 코드를 뜻하고, 함수 useReducer를 사용하면 상태 변화 코드를 컴포넌트 밖으로 분리할 수 있으며, 이를 사용하는 이유는 하나의 컴포넌트 안에 너무 많은 상태 변화 코드가 있으면 가독성을 해쳐 유지 보수를 어렵게 만들기 때문임

useReducer의 기본 사용법

const [count, dispatch] = useReducer(reducer, 0);

- count: 상태 변수
- dispatch: 상태 변화 촉발 함수
- reducer: 상태 변화 함수
- 0: 초깃값

useReducer가 반환하는 함수 dispatch를 호출하면, useReducer는 함수 reducer를 호출하고, 이 함수가 반환하는 값이 State를 업데이트 함