[ReactJS_Complete] React.useReducer()

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useReducer()

: 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

: 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음

 

useReducer() 의 사용법

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

 

 - state: 컴포넌트에서 사용 할 수 있는 상태

 - dispatch: 액션을 발생시키는 함수

▶ 예: dispatch({ type: 'INCREMENT' })

 - reducer: reducer 함수

 - initialState: 초기 상태

 

1. useReducer() 선언

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

 

2. emailReducer() 선언

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

 * state = emailState

 * action = dispatchEmail()이 전달한 객체

 

 

3. dispatchEmail 선언을 통한 emailReducer() 호출

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

 

4. 호출된 emailReducer()에 dispatchEmail()을 통해 전달받은 데이터를 통한 로직 구현

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

 

5. useReducer() 사용

const Login = (props) => {
  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: null,
  });
  const emailChangeHandler = (event) => {
    dispatchEmail({type: 'USER_INPUT', val: event.target.value});
    setFormIsValid(
      event.target.value.includes('@') && enteredPassword.trim().length > 6
    );
  };
  const validateEmailHandler = () => {
    dispatchEmail({type: 'INPUT_BLUR'});
    
  };
  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(emailState.value, enteredPassword);
  };
  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>
      </form>
    </Card>
  );
};
 

 

⭐ 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편함

 

 

 

참고 자료

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook