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]);