중첩 속성을 useEffect에 종송석으로 추가하기

useEffect()에 객체 속성을 종속성으로 추가하기 위해서 dstructuring을 사용한다.

const { someProperty } = someObject;
useEffect(() => {
  // ...
}, [someProperty]);

이 방법은 다양한 상황에서 불필요한 Effect 실행을 방지할 수 있다.

예를들어 유효성 검사를 수행하는 로그인 시스템에서 사용할 수 있다.
시스템에서는 사용자의 입력 데이터를 대상으로 유효성 검사를 실시하고
만약 유효성에서 벗어난다면 해당 Input 슬롯이 적색으로 바뀌는 기능을 갖는다.
아래의 코드는 직접 실습을 거쳐 학습한 코드이다.

// 이팩트가 불필요하게 실행되는 것을 방지하기 위해서
// 유효성 검사를 수행하는 Reducer변수 emailState와 passwordState의
// isValid키 값을 객체 디스트럭처링으로 상수로 저장하고
// 유효성 검사의 결과 변경되지 않으면 이팩트가 불필요하게 실행되지 않도록 함.
const { isValid: emailIsValid } = emailState;
const { isValid: passwordIsValid } = passwordState;

useEffect(() => {
    // 디바운싱 : 사용자가 타이핑을 일시 중지했을 때(입력을 끝냈을 때), 유효성 검사 실시.
    const identifier = setTimeout(() => {
        console.log("Checking form validity");
        setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    // useEffect는 "함수"!를 리턴할 수 있음
    // 클린업 함수라고 함
    // 클린업 함수는 모든 새로운 사이드이펙트 함수가 실행되기 전에, 그리고 컴포넌트가 제거되기 전에 실행된다.
    return () => {
        console.log("clean up!");
        clearTimeout(identifier);
    };
}, [emailIsValid, passwordIsValid]);

위 코드는 useReducer를 이용한 email과 password는 변수를 다룬다.
두 변수는 객체 형식으로 아래와 같다.

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

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

두 변수를 useEffect의 종속성으로 설정하면 유효성 검사에 통과한 이후 추가로 입력되는 데이터에도 useEffect가 반응하게 된다. 이는 불필요한 Effect의 실행이고 적절하지 못하다.

이를 해결하기 위해 위의 distructuring을 사용한 코드를 이용한다.
isValid키 값을 객체 distructuring으로 상수애 저장한 후 유효성 검사의 결과가 변경되지 않으면 Effect가 실행되지 않도록 하여 불필요한 실행을 방지할 수 있다.

오늘도 하나 배워간다.