useReducer: 반응 후크

React의 useReducer: 두 개의 미니 프로젝트로 상태 관리 단순화

소개

상태 관리는 React에서 동적 및 대화형 애플리케이션을 구축하는 데 중요한 부분입니다. useState는 간단한 상태를 관리하는 데 충분하지만 애플리케이션의 상태가 복잡해짐에 따라 useReducer는 이를 처리하는 더 강력하고 예측 가능한 방법을 제공합니다. Redux의 리듀서 패턴에서 영감을 받은 useReducer를 사용하면 특정 작업에 대한 응답으로 상태 전환이 어떻게 발생해야 하는지 정의할 수 있으므로 여러 개의 복잡한 상태 업데이트가 있는 시나리오에 이상적입니다.

이 기사에서는 다음을 수행합니다.

1. useReducer에 대한 명확한 설명과 구문, 사용 시기를 살펴보세요.
2. 두 가지 미니 프로젝트 구현:
   • 여러 작업이 포함된 카운터: 기본적인 증가/감소를 넘어서는 예시로, useReducer가 여러 작업 유형을 처리하는 방법을 보여줍니다.
   • 복잡한 상태 전환이 포함된 할 일 목록: 복잡한 상태 개체를 관리하는 useReducer의 기능을 강조하는 할 일 앱

useReducer가 React에서 상태 관리를 어떻게 단순화할 수 있는지 살펴보겠습니다!

---

useReducer 이해

useReducer 란 무엇입니까?

useReducer는 useState가 부족한 상황을 위해 설계된 React 후크입니다. 상태를 직접 업데이트하는 대신 현재 상태와 작업을 기반으로 다음 상태를 계산하는 감속기 함수를 지정합니다. 이 선언적 접근 방식을 사용하면 상태 전환을 예측 가능하게 유지하고 더 복잡한 상태 논리를 중앙 집중식으로 관리할 수 있습니다.

useReducer 구문

다음은 구문 분석입니다.

const [state, dispatch] = useReducer(reducer, initialState);

• reducer: 작업에 따라 상태를 업데이트하는 방법을 정의하는 함수입니다. 두 가지 인수가 필요합니다:

  • 상태: 현재 상태입니다.
  • 작업: 일반적으로 유형 및 선택적 페이로드를 포함하여 작업에 대한 정보가 포함된 개체입니다.

• initialState: 상태의 시작 값입니다.

예: useReducer를 사용한 기본 카운터

useReducer를 사용하여 간단한 카운터를 만들어서 구문이 실제로 작동하는지 살펴보겠습니다.

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

코드 설명

1. 리듀서 함수: 이 함수는 작업을 처리하는 방법을 정의합니다. 작업 유형(증가 또는 감소)에 따라 감속기 함수는 새로운 상태 객체를 반환합니다.
2. 액션 디스패치: 디스패치는 리듀서에 액션을 보내고 리듀서는 이를 처리하고 그에 따라 상태를 업데이트합니다.

---

useReducer를 사용하는 경우

useReducer는 다음과 같은 경우에 특히 유용합니다.

• 상태 논리가 복잡하거나 여러 하위 값을 포함합니다.
• 다음 상태는 이전 상태에 따라 달라집니다.
• 여러 구성요소는 리듀서가 관리하는 상태에 액세스해야 합니다(전역 상태를 위해 useReducer와 useContext를 결합할 수 있음).

---

미니 프로젝트 1: 다양한 작업이 포함된 카운터

이 프로젝트에서는 useReducer가 더 광범위한 작업 세트를 처리하는 방법을 확인하기 위해 여러 작업(증가, 감소, 재설정)을 허용하는 향상된 카운터를 만들 것입니다.

1단계: 리듀서 함수 정의

const [state, dispatch] = useReducer(reducer, initialState);

2단계: 카운터 구성 요소 생성

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

이 향상된 카운터는 이제 증가 및 감소 외에도 재설정 기능을 지원합니다. 이 프로젝트는 상태 업데이트 작업을 관리하는 useReducer의 유연성을 보여줍니다.

---

미니 프로젝트 2: 복잡한 상태 전환을 사용하여 할 일 목록 작성

할 일 목록 앱은 작업 추가, 제거, 전환과 같은 여러 전환이 있는 복잡한 상태 객체를 관리하는 데 useReducer가 어떻게 이상적인지 강조합니다.

1단계: 감속기 정의

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

2단계: 할 일 목록 구성 요소 만들기

'react'에서 React, { useReducer, useState }를 가져옵니다.

함수 ToDoList() {
    const [todos, 파견] = useReducer(todoReducer, []);
    const [task, setTask] = useState('');

    const handlerAdd = () => {
        if (task.trim()) {
            디스패치({ 유형: '추가', 페이로드: 작업 });
            setTask(''); // 입력 필드 지우기
        }
    };

    반품 (
        <div>
            <h2>할 일 목록</h2>
            <입력
                값={작업}
                onChange={e => setTask(e.target.value)}
                placeholder="새 작업 입력"
            />
            <button onClick={handleAdd}>작업 추가</button>

            

{todos.map(todo => (

• 할 일 목록 코드 설명

1. 작업:

   • 추가: 고유 ID와 완료 상태가 false로 설정된 새 작업을 목록에 추가합니다.
   • 제거: ID를 기준으로 작업을 필터링하여 삭제합니다.
   • 토글: 완료 상태를 전환하여 작업을 완료 또는 미완료로 표시합니다.

2. 동적 데이터와 함께 useReducer 사용: 이 예에서는 useReducer가 객체 배열에서 복잡하고 중첩된 상태 업데이트를 처리하여 여러 속성이 있는 항목을 관리하는 데 완벽하게 만드는 방법을 보여줍니다.

---

결론

이 기사에서는 React 애플리케이션에서 보다 복잡한 상태 관리를 위해 useReducer를 효과적으로 사용하는 방법을 배웠습니다. 우리 프로젝트를 통해:

1. 향상된 카운터에서는 useReducer가 여러 작업 기반 상태 업데이트를 어떻게 단순화하는지 보여주었습니다.
2. 할 일 목록에서는 useReducer를 사용하여 작업 배열과 같은 복잡한 상태 객체를 관리하는 방법을 보여줍니다.

useReducer를 사용하면 강력한 상태 관리가 필요한 애플리케이션을 위해 더욱 명확하고 예측 가능하며 유지 관리 가능한 코드를 작성할 수 있습니다. 이러한 프로젝트를 실험해보고 다음에 React 앱에서 복잡한 상태 로직을 접하게 된다면 useReducer를 고려해 보세요!

위 내용은 useReducer: 반응 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!