[React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행

[React, Next.js] useEffect라는 Hook을 사용해서 값이 변경될 때 제어코드

React 값이 변경될 때, 일부 코드를 실행해야 할때 사용하는 코드

 

function HookComponent(data) {
  useEffect(() => {
    // 렌더링 이후 실행할 코드
    console.log('data 값이 설정');
    return () => {
    	// 컴포넌트가 사라질 때 실행되는 코드
        console.log('data 값이 설정 전');
    }
  }, [data]);

  return (
    <div>컴포넌트 HTML 구성부</div>
  );
}

 

위 코드는

1. 처음에 페이지가 렌더링 됐을 때 L4의 콘솔이 찍힌다.

2. props로 받은 data값이 변경될 때 L4의 콘솔이 찍힌다.

3. data값이 변경되기 직전에 L7의 콘솔이 찍힌다.

4. 컴포넌트가 사라질 때 L7의 콘솔이 찍힌다.