[React] Section 11_2

useReducer

더 복잡한 state에 특히 유용

 

setFormIsValid(
      enteredEmail.includes("@") && event.target.value.trim().length > 6
    );

 

-> 위는 useState를 useReducer로 대체할만한 좋은 예시

-> 함께 속하는 state들이 있는 경우

-> 다른 state에 의존하여 state update를 하는 경우

 

예를 들어, enteredEmail state에 의존하여 emailIsValid state를 변경하는 것은 해서는 안되는 일이다!!!

-> 대부분의 경우에는 잘 작동하지만 어떤 경우에는 작동하지 않을 수 있다.

-> 함수 폼으로는 여기에서 설정하는 state(emailIsValid)에 대해서만 최신 state를 얻을 수 있기 때문에 규칙 위반

-> 이런 경우에 useReducer 사용하는 것이 항상 좋다!!!

 

-> 다른 state를 기반으로 하는 state를 업데이트 하면 그 경우에는 하나의 state로 병합하는 것도 좋다!!!

(이런 경우는 useReducer 없이도 할 수 있다)

-> 하지만 state가 복잡해지기 때문에 useReducer도 고려할 필요성 존재

 

useReducer란

useState와 비슷하지만 state 업데이트 함수가 다르게 작동

-> 새로운 state 값을 설정하는 대신 액션을 디스패치

-> 그 액션은 useReducer의 첫번째 인수가 소비 (리듀서 함수)

-> 리듀서 함수는 최신 state 스냅샷을 자동으로 가져오는 함수

-> 또한 새로운 업데이트 된 state를 반환

 

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

 

emailReducer 함수는 컴포넌트 함수 바깥에 정의 할 수 있다.

리듀서 함수 내부에서는 컴포넌트 함수 내부에서 만들어진 어느 데이터도 필요로 하지 않기 때문!

 

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

 

객체 디스트럭처링 사용하기

별칭 할당

 const { isValid: emailIsValid } = emailState;
  const { isValid: passwordIsValid } = passwordState;
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    return () => {
      console.log("clean up");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

 

-> 값만 변경되고 유효성은 변경되지 않으면 useEffect가 다시 실행되지 않는다.

-> useEffect를 더욱 최적화하고 effect가 불필요하게 실행되는 것을 피하는 매우 중요한 개념!

 

다른 사용사례 : effect 의존성으로 props가 있는 경우 (특정 props가 변경될 때만 useEffect를 실행하고 싶은 경우)

 

-> 핵심은 destructuring을 사용한다는 것이 아니라, 전체 개체 대신 특정 속성을 종속성으로 전달한다는 것

 

종속성으로 someObject.someProperty 같이 코드를 작성할 수도 있으며 같은 방식으로 작동한다.

 

useState vs useReducer (언제 무엇을 사용해야 하나?)

useState

state 업데이트가 쉽고, 몇 종류 안되는 경우에 적합

state가 변경되는 경우가 다양하지 않을 때

 

useReducer

state 객체가 있거나 복잡한 state가 있는 경우 (useReducer는 리듀서 함수를 쓸 수 있기 때문에 더 강력하다.)

특히 연관된 state 조각들로 구성된 state 관련 데이터를 다루는 경우