10.1 Reducer 사용하여 부작용 처리 & Context API 사용하기 : useReducer (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

useReducer

useState의 대체 함수이며 useState의 상위 버전의 Hook이다.

 

리액트 공식 홈페이지에서는 useReducer가 쓰이는 상황을 아래와 같이 설명한다.

• 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우
• state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호한다.

.- 리액트를 다루는 기술- 이라는 책에서는 조금 더 쉽게 설명했다. 

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용한다.

그럼 강의의 따라 간단한 로그인 유효성 검사를 하는 코드로 useReducer를 사용해보자.

useReducer 사용하기

먼저 useReducer를 import 한다.

import React, { useState, useEffect, useReducer } from "react";

비구조화 할당으로 사용하는데, useState와 비슷하게 생겼지만 약간 다르다.

emailState가 state 쓰이고 dispatchEmail은 action을 dispatch 하는 함수이다.

 

action은 useReducer의 첫번째 인자로 있는 emailReducer 가 action을 다룰 것이다.

다시 말해, emailReducer 는 Reducer 함수라고 불리고 최신 state값을 자동으로 가져온다.

 

두번째 인자로 있는 객체는 초기 state를 설정한다.

여기서는 사용하지 않았지만, 세번째 인자도 받을 수 있는데 세번째 인자는 초기 함수를 설정한다.

초기함수 설정이 쓰이는 경우는 http의 결과나 이와 비슷한 경우에 쓰인다.

  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: "",
    isVaild: null,
  });

리듀서의 첫번째 인자로 사용된 emailReducer 이다.

dispatch함수를 사용하여 action 을 다루는데 해당 action 이 실행되면 return 값으로 state가 업데이트된다.

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isVaild: action.val.includes("@") };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isVaild: state.value.includes("@") };
  }
  return { value: "", isVaild: false };
};

 

emailChageHandler 함수가 실행되면 dispatch 함수를 실행 시킨다.

함수가 실행되면 reducer의 type이 USER_INPUT 인 action.type에 val 을 키값으로 e.target.value 를 전달한다.

  const emailChangeHandler = (e) => {
    dispatchEmail({ type: "USER_INPUT", val: e.target.value });  // dispatch

    setFormIsValid(e.target.value.includes("@") && passwordState.isVaild);
  };

reducer 코드를 다시 한번 살펴본다.

dicpatch 에 의해 action 은 현재 값인 e.target.value를 전달받았다.

그럼 계속 state에 value 를 현재 값인 action.val, isVaild를 false 로 return 하다가

action.val 에 @이를 보함하면 isValid를 true로 return한다.

강의에서는 이 방법으로 email을 간단한 유효성 검사를 한다.

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isVaild: action.val.includes("@") };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isVaild: state.value.includes("@") };
  }
  return { value: "", isVaild: false };
};

 

후기

처음 쓰는 후기인데, useReducer를 처음 사용할 때는 매우 혼란스러웠지만 하나하나 천천히 생각해보며

블로그에 글을 써보니 어느새 useReducer가 익숙해진 것 같다. (물론 예전의 글이나 위의 글은 나만 알아볼 것 같음)