TIL 221030 cleanup함수에 대해서/그 외 잡다한 것

오늘 공부한 것

• useEffect()의 cleanup 함수에 대해서
• useEffect()의 의존성 배열에 객체 속성을 넣고 싶을 때
• useState() vs useReducer()
• 리액트 Hook의 규칙

cleanup 함수

useEffect()를 사용할 때 스테이트가 언마운트 될 때 cleanup 함수를 사용한다는 것은 알겠는데 이게 왜 필요한지는 모르는 상태였다.

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("유효성 검사 중");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);
    
    return () => {
      clearTimeout(identifier);
    };

  }, [enteredEmail, enteredPassword]);

위의 예시에서 클린업 함수가 없다면, 셋타임아웃을 쓰더라도 함수 실행이 0.5초에 한번 씩 될 뿐이지, 결국 키를 누르는 만큼 함수가 실행된다.

이런 상황에서 cleanup함수 영역에 타이머를 종료시키는 함수인 clearTimeout을 사용해서 identifier라는 비동기 함수를 종료시키면, 언마운트 되는 순간 함수를 지워버리기 때문에 클린업 함수가 실행되기 전에 예약된 타이머들은 실행되지 않는다.

즉 새로운 타이머를 설정하기 전에 마지막 타이머를 지워버린다.

인풋에 빠르게 타이핑을 해도(언마운트 되는 횟수는 콘솔에 찍힌 클린업 횟수를 보면 알 수 있다.) 유효성검사를 하는 identifier 함수는 0.5초에 한 번씩만 실행된 것을 알 수 있다!

useEffect()의 의존성 배열에 객체 속성을 넣고 싶을 때

useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("유효성 체크");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);
    return () => {
      console.log("클린업!");
      clearTimeout(identifier);
    };
  }, [emailState.isValid, passwordState.isValid]);

이렇게 점 찍어서 가져오는 것도 가능 하지만

  const { isValid: emailIsValid } = emailState;
  const { isValid: passwordIsValid } = passwordState;

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("유효성 체크");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);
    return () => {
      console.log("클린업!");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

이런 식으로 객체 디스트럭처링을 이용해서 특정 키 값의 이름을 변수로 지정하는 경우가 일반적이라고 한다.(일단 인강의 강사님은 그렇게 말씀하신다)

useState() vs useReducer()

useState()

• useState는 주요 state 관리 도구. 대부분의 경우
• 개별 state 및 데이터들을 다루기에 적합
• state 업데이트가 쉽고, state가 변경되는 경우가 다양하지 않을 때

useReducer()

• state로서의 객체가 있는 경우, 또는 복잡한 state가 있을 경우
• 연관된 state 조각들로 구성된 state 관련 데이터를 다루는 경우(ex. 폼 인풋 state 같은)
• 복잡한 state 업데이트 로직이 많을 때 효과적임

Hooks의 규칙

• 리액트 훅은 리액트 함수에서만 호출해야 된다.
• 리액트 훅은 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출해야 한다. (중첩 함수나 블록 안에 대뜸 호출하지 말라는 것)
• 암묵적인 룰 : useEffect()를 쓸 때는 참조하는 모든 항목을 deps로 추가해야 된다.