51강 useReducer()

 
 

 
로그인이나 회원가입 같은 입력값을 받는 폼에서는 데이터가 정말 많을 수 있다. 10개 이상이 될 수도 있는데 그런것들을 하나하나 state로 값을 저장하고 유효성검사를하고 form 전체를 하는 것이 굉장히 지저분하고 비효율적이다. 
 


유효성 검사는 input값이 우리가 의도한 규칙에 맞게 들어오는지 검사

Debounce는 동일한 이벤트가 반복해서 실행되는 경우 일정 시간 지연 시킨 후 처리

useState()의 한계
복잡한 상태를 다루려면 여러 개의 snapshot를 관리해야함.
그 과정에서 상태변화가 꼬일 수 있음

useState()의 한계
enteredEmail -> emailIsValid -> formIsValid

enteredPassword -> passwordIsValid -> formIsValid

useState()의 한계
const validateEmailHandler = () => {
setEmailIsValid(enteredEmail.include(‘@‘);
};
 

 

validateEmailHandler가 실행될 때 아직 enteredEmail 값이 업데이트 안 되어 있을 수 있다.

setState는 emailIsValid를 쓰면서 enteredEmail state를 쓰니까 각각 다른 state를 쓴다. 각각 독립적으로 변화가 일어난다.

state 도 바꿔주는게 연산이기때문에 시간이 걸린다.

dispatch: state를 조작해주는 도구

https://ko.legacy.reactjs.org/docs/hooks-reference.html#usereducer


useState의 대체 함수입니다.
 
https://react.dev/reference/react/useReducer

useReducer – React

 
dispatch
이전에 useState 쓸 때는 setState만 하면 되는데 dispatch를 set으로 state를 통쨰로 바꿔주는 것이 아니라 여기에다가 다른 로직을 추가해주던가 필요한 부분만 바꿔주던가 "이제 좀 부분적으로 state를 관리할 수 있게 된다."
 
state가 조금 복잡해지면 dispatch를 통해서 값을 입력받을 때 유효성을 검증할 때 값을 매번 나눠서 초기화를 할 때 여러개의 타입별로 state 를 어떻게 바꿔줄건지를 구분할 수 있다. 이런 측면에서 dispatch가 유용하게 쓸 수 있다. 
 
reducer
reducer: 이 state를 어떻게 바꿔줄건지 그 로직이 들어가있는 공간이다. 
 

initialArg = initial argument  = 초기값 
init? 은 optional한 값이다. 
 
reducer는 component 바깥에서 선언해준다.
 

 
 

 
 
dispatch는 반환이 되는 함수다.
상태를 업데이트를 해서 다른값들로 업데이트 하게 해주고
리랜더링을 트리거해줍니다. 
 
dispatch는 setstate와 굉장히 비슷한개념이다. reducer에 state랑 action 두가지를 보내야하는데 이건 유일한 disaptch의 인자다. dispatch를 컴포넌트 안에서 선언을 하고 이 dispatch를 사용해줘야하는데 dispatch를 사용할 때 dispatch에 담은 인자로 이 액션이 유일한 인자다. 이렇게 나와있데 
액션: {type: 'incremented_age'}
 
action:
액션은 리듀서에서 어떤 타입으로 처리할 겁니다. 
1. 처리하는 타입 
2. 위에 타입을 처리할 때 값이 필요할 수도 있잖아 그 필요한 값을 페이먼츠라고 하는데 그 값을 넣어준다고함. 
 
 

 
 
로그인을 할 때 이메일이랑 패스워드 받는데 유효성 검사하는 부분이 다 state로 되어있는데 useReducer를 통해서 만들어본다고 함. 
 
practice/4-6 checkout 하기
 
 

import React, { useState, useEffect, useReducer, useContext } from 'react';

import Card from '../UI/Card/Card';

import classes from './Login.module.css';

import Button from '../UI/Button/Button';

import AuthContext from '../../context/AuthContext';

const emailReducer = (state, action) => {

  //값이 바뀌는 경우 setEnteredEmail

  if(action.type === 'USER_INPUT'){

    return {

      value: action.val,

      isValid: action.val.includes('@')

    }

  }

  //유효성 검사를 해야하는 경우 setEmailIsValid

  if(action.type === 'INPUT_BLUR'){

    return {      

      value: state.value, //값은 그대로 갖고 있고 유효성검사만

      isValid: state.value.includes("@")}

  };

  return {

    value: '',

    isValid: null,

  }

};

const passwordReducer = (state, action) => {

  //값이 바뀌는 경우 setEnteredPassword

  if(action.type === "USER_INPUT"){

    return {

      value: action.val,

      isValid: action.val.trim().length > 6,

    };

  }

  //  유효성검사를 해야하는 경우, setPasswordIsValid

  if(action.type === "INPUT_BLUR"){

    return {

      value: state.value,

      isValid: state.value.trim().length > 6

    };

 

};

  return {

    value: '',

    isValid: null,

  }

}

const Login = () => {

  const context = useContext(AuthContext);

  // 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]);

  const emailChangeHandler = (event) => {

    //setEnteredEmail(event.target.value);

    dispatchEmail({type: 'USER_INPUT', val:event.target.value }) //value는 또 바로 위에 event.target.value넣으면된다고함

    setFormIsValid(

      emailState.isValid && passwordState.isValid

    );

  };

  const passwordChangeHandler = (event) => {

   // setEnteredPassword(event.target.value);

    dispatchPassword({type: 'USER_INPUT', val: event.target.value})

    setFormIsValid(

      emailState.isValid && passwordState.isValid

    );

  };

  const validateEmailHandler = () => {

    //setEmailIsValid(enteredEmail.includes('@'));

    dispatchEmail({type: 'INPUT_BLUR'});

  };

  const validatePasswordHandler = () => {

    //setPasswordIsValid(enteredPassword.trim().length > 6);

    dispatchPassword({type: 'INPUT_BLUR'});

  };

  const submitHandler = (event) => {

    event.preventDefault();

    context.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">이메일</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">비밀번호</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}>

            로그인

          </Button>

        </div>

      </form>

    </Card>

  );

};

export default Login;

 
 
Login 컴포넌트 중심으로 볼거라고함. 
 
npm install이 package.json파일에서 명시된 의존성을 한꺼번에 다 설치해주는거임.
 
 

 

 
clone 해왔는데 props is not defined인거야.. 그래서 () 안에 props만 매개변수로 넣어주니까 해결함. 

useState();

이 코드는 React에서 사용되는 useState 훅을 이용하여 상태를 관리하는 것입니다.

const [enteredEmail, setEnteredEmail] = useState(''); 이 부분은 useState 훅을 사용하여 상태를 정의하는 것입니다. 이 상태는 'enteredEmail'이라는 변수로 저장되며, 초기값은 빈 문자열('')입니다. 'setEnteredEmail'은 이 상태를 업데이트하는 함수입니다.

이렇게 함으로써 React 컴포넌트에서 'enteredEmail' 변수를 사용하고, 이를 변경할 때 'setEnteredEmail' 함수를 호출하여 상태를 업데이트할 수 있습니다.

before
const [enteredEmail, setEnteredEmail] = useState('');

after
const [emailState, dispatchEmail] = useReducer(emailReducer, {});

여기서 {}는 초기값이다.

그리고 컴포넌크 바깥에 reducer정의 해준다.

const emailReducer = (state, action) => {}


const [emailState, dispatchEmail] = useReducer(emailReducer, {});

여기서 {} 초기값에 값을 넣어줘야하는데


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

handler에서 set으로 쓰고 있는 거를 다 바꿔줘야함

enteredEmail를 emailState.value로 바꾸기

set은 dispatch를 통해 바꾼다.

reducer에서 여러가지 타입의 요청이 오기 때문에 분기처리를 잘해줘야한다고 함

분기처리는 action.type으로

if(action.type === ‘USER_INPUT’)
return {
   value: action.val,
   isValid: action.val.includes(‘@‘)
}



여기서는 유효성검사를 해야하는거라서 값은 그대로 써줘야하는거임


if(action.type === ‘USER_BLUR’)
return {
   value: state.value,
   isValid: state.value.includes(“@“)
};

return {
    value:’’,
    isValid: null,
}


dispatch안에는 action을 넣어줘야하는데
//setEnteredEmail(event.target.value)

->

dispatchEmail({type: ‘USER_INPUT’, val: event.target.value})