useReducer, useReducer 의 구조

 

useReducer

 

state 관리를 도와준다. 더 복잡한 state에 특히 유용하다. 

 

여러 state가 함께 속해 있는 경우

여러 state가 같이 바뀌거나 서로 관련된 경우

 

👇

useState나 거기에서 얻은 state는 사용하거나 관리가 어려워지거나 오류가 발생하기 쉽다. 

👇

이런 경우 useState 대신 useReducer를 쓸 수 있다. 

 

useReducer는 더 강력한 state 관리가 필요할 때 쓴다. (그렇다고 항상 사용은 x)

---

useReducer를 사용하는 것이 항상 좋을때

 

다른 state를 기반으로 하는 state를 업데이트하면 하나의 state로 병합하는 것도 좋다. 

---

 

useReducer 의 구조

 

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);

state = 최신 state 스냅샷 // 이건 state 관리 매커니즘이다. 

dispatchFn = state 스냅샷을 업데이트할 수 있게 해주는 함수

 

useState와 차이점

새로운 state 값을 설정하는 대신 액션을 디스패치한다. 

 

reducerFn = 그 액션은 useReducer의 첫 번째 인수가 소비할 건데, reducerFn이라고 한다.

최신 state 스냅샷을 자동으로 가져오는 함수이다. 왜냐면 리액트가 이 함수를 호출할 것이기 때문이다.

그리고 이 함수는 디스패치된 액션을 가져온다. 왜냐면 리액트는 새 액션이 디스패치될 때마다 이 함수를 호출하기 때문이다. 그러면 이 함수는 리액트가 관리하는 최신의 state 스냅샷을 가져온다. 그리고 이 리듀서 함수 실행을 트리거 하는 디스패치된 액션을 가져온다. 

 

& 새로운 업데이트된 state를 반환한다. (useState 훅의 함수 폼과 약간 비슷함)

 

initialState = 초기 state

initFn = 초기 state를 설정하기 위해 실행해야 하는 함수 (초기 state가 좀 더 복잡한 경우)

 

---

useReducer를 입력값과 유효성을 결합하기 위해 사용할 수 있다. (id, 비밀번호)

그리고 전체 폼 state를 관리하는데도 사용할 수 있다. 

 

즉, 전부 들어있는 큰 폼 state 한 개 또는 작은 state 여러 개로 관리할 수 있다. 

 

 

아래 예시에서는 간단히 emailState만 useReducer로 관리해보자!

 

기존 코드

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

import Card from "../UI/Card/Card";
import classes from "./Login.module.css";
import Button from "../UI/Button/Button";

const Login = (props) => {
  const [enteredEmail, setEnteredEmail] = useState("");
  const [emailIsValid, setEmailIsValid] = useState();
  const [enteredPassword, setEnteredPassword] = useState("");
  const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("checking form validity!!");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      console.log("clean up!!!!");
      clearTimeout(identifier);
    }; // 이건 clean up 함수이다.
  }, [enteredEmail, enteredPassword]);
  //여기서 setFormIsValid()를 재평가하고 유효성 검사 state 설정 함수를 다시 실행해야 한다. 이메일 및 비밀번호 변경 핸들러의 모든 키 입력에 대해서!
  //setTimeout 함수를 사용해서 500밀리초 후에만 이 작업 (유효성 검사)을 수행한다.

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
  };

  const validateEmailHandler = () => {
    setEmailIsValid(enteredEmail.includes("@"));
  };

  const validatePasswordHandler = () => {
    setPasswordIsValid(enteredPassword.trim().length > 6);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(enteredEmail, enteredPassword);
  };

 

useReducer 사용한 코드

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

import Card from "../UI/Card/Card";
import classes from "./Login.module.css";
import Button from "../UI/Button/Button";

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.includes("@") }; // "USER_INPUT" 액션을 받을 때마다 여기서 value와 isValid를 모두 업데이트하는 것이다.
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.includes("@") };
  }
  return { value: "", isValid: false };
};

const passwordReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.trim().length > 6 }; // "USER_INPUT" 액션을 받을 때마다 여기서 value와 isValid를 모두 업데이트하는 것이다.
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.trim().length > 6 };
  }
  return { value: "", isValid: false };
};

// 리듀서 함수는 컴포넌트 함수 밖에 만듬. 왜냐면 리듀서 함수 내부에서는 컴포넌트 함수 내부에서 만들어진 어떤 데이터로 필요하지 않기 때문이다.
// 리듀서 함수 내부에서 요청되고 사용되는 모든 데이터는 리액트가 이 함수를 실행할 때 자동으로 이 함수로 전달된다.

const Login = (props) => {
  // const [enteredEmail, setEnteredEmail] = useState('');
  // const [emailIsValid, setEmailIsValid] = useState();
  // const [enteredPassword, setEnteredPassword] = useState("");
  // const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

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

  const [passwordState, dispatchPassword] = useReducer(passwordReducer, {
    value: "",
    isValid: null,
  });

  useEffect(() => {
    console.log("EFFECT RUNNING");

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);

  // useEffect(() => {
  //   const identifier = setTimeout(() => {
  //     console.log('Checking form validity!');
  //     setFormIsValid(
  //       enteredEmail.includes('@') && enteredPassword.trim().length > 6
  //     );
  //   }, 500);

  //   return () => {
  //     console.log('CLEANUP');
  //     clearTimeout(identifier);
  //   };
  // }, [enteredEmail, enteredPassword]);

  //여기서 setFormIsValid()를 재평가하고 유효성 검사 state 설정 함수를 다시 실행해야 한다. 이메일 및 비밀번호 변경 핸들러의 모든 키 입력에 대해서!
  //setTimeout 함수를 사용해서 500밀리초 후에만 이 작업 (유효성 검사)을 수행한다.

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

    setFormIsValid(event.target.value.includes("@") && passwordState.isValid);
  };

  const passwordChangeHandler = (event) => {
    // setEnteredPassword(event.target.value);
    dispatchPassword({ type: "USER_INPUT", val: event.target.value });

    //setFormIsValid(enteredEmail.includes("@") && event.target.value.trim().length > 6)
    //setFormIsValid(emailState.value.includes("@") && event.target.value.trim().length > 6)
    // useReducer를 썼기 때문에 입력된 값을 저장할 것이기 때문에 emailState.value라고 씀

    setFormIsValid(emailState.isValid && event.target.value.trim().length > 6);
    // isValid 필드가 있어서 재검증 하는 대신 emailState.isValid가 true인지 확인 할 수 있다.
  };

  const validateEmailHandler = () => {
    dispatchEmail({ type: "INPUT_BLUR" }); // 여기서는 인풋이 포커스를 잃었다는 것만 중요하기 때문에 추가해야하는 데이터가 없다.
  };

  const validatePasswordHandler = () => {
    dispatchPassword({ type: "INPUT_BLUR" });
  };

  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(emailState.value, passwordState.value);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            emailState.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor='email'>E-Mail</label>
          <input
            type='email'
            id='email'
            value={emailState.value}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            passwordState.isValid === false ? classes.invalid : ""
          }`}
        >
          <label htmlFor='password'>Password</label>
          <input
            type='password'
            id='password'
            value={passwordState.value}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button type='submit' className={classes.btn} disabled={!formIsValid}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default Login;

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓