더북(TheBook)

8.2.2 특정 값이 업데이트될 때만 실행하고 싶을 때

useEffect를 사용할 때, 특정 값이 변경될 때만 호출하고 싶을 경우도 있겠지요? 클래스형 컴포넌트라면 다음과 같이 작성할 것입니다.

componentDidUpdate(prevProps, prevState) {
if (prevProps.value != = this.props.value) {
  doSomething();
}
}

이 코드는 props 안에 들어 있는 value 값이 바뀔 때만 특정 작업을 수행합니다. 이러한 작업을 useEffect에서 해야 한다면, 어떻게 해야 할까요?

바로 useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다. Info 컴포넌트의 useEffect 부분을 다음과 같이 한번 수정해 보세요.

Info.js - useEffect

useEffect(() => {
    console.log(name);
  }, [name]);

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.