리액트 훅 useEffect

useEffect는 React에서 Side Effect 를 처리하는 훅 입니다.

컴포넌트가 렌더링된 후 추가적인 작업을 실행하거나 특정 상태 변화에 맞춰 작업을 처리하는 역할을 합니다

ex API호출 , DOM 업데이트 , 이벤트리스너 설정 등등

 

 

기본 사용법

 

useEffect는 컴포넌트가 렌더링된 후 실행됩니다.

 

• 첫 번째 인자 : 렌더링 후 실행할 함수를 받습니다.
• 두 번째 인자 : 의존성 배열로 , 배열 안에 있는 값이 변경될 때마다 useEffect가 다시 실행됩니다. 빈배열을 넣으면 컴포넌트가 처음 마운트될 때만 실행됩니다.

 

이 코드에선  처음 화면이 렌더링 될때 콘솔에 실행이 찍힙니다.

 

의존성 배열의 역할

 

useEffect가 항상 렌더링 후에 실행되지만 특정 값이 변경될 때만 실행되도록 제어하고 싶을 때 의존성 배열을 사용합니다.

 

이 코드는 data가 변할 때마다 useEffect가 실행되며 콘솔에 변경된 data값이 출력됩니다,

 

 

비동기 작업

 

API에서 데이터를 가져오는 비동기 작업에도 useEffect를 많이 사용합니다. 

예로 컴포넌트가 처음 렌더링될 때 서버에서 데이터를 불러와 화면에 표시하고 싶을 때 유용합니다.

 

컴포넌트가 처음 렌더링될 때 API 호출을 통해 데이터를 가져오고 그 데이터를 콘솔에 출력합니다.

 

 

정리 작업

 

useEffect는 컴포넌트가 언마운트되기 전 또는 다시 렌더링되기 직전에 정리 작업을 수행할 수 있는 정리 함수를 반환할 수 있습니다. 주로 타이머 , 이벤트 리스너 등등을 정리할 때 사용합니다.

 

이 코드에서는 컴포넌트가 처음 렌더링될 때 스크롤 이벤트 리스너를 등록하고 컴포넌트가 사라질때 해당 이벤트 리스너를 제거 합니다.

 

useEffect에서 return 의미

useEffect 안에서 반환하는 함수는 컴포넌트가 사라지기 직전에 호출된다.

즉 컴포넌트가 더 이상 화면에 존재하지 않을 때 React가 정리 함수를 호출하여 이벤트 리스너를 제거하는 작업을 할 수 있도록 해줍니다.

 

위 코드의 흐름

1. 처음 렌더링 

• 컴포넌트가 렌더링될 때 window.addEventListener('scroll',scroll) 을 통해 스크롤 이벤트 리스너를 등록

2. 정리 작업 (언마운트)

• 컴포넌트가 사라지기 직전에 useEffect 안의 return 부분에 작성된 함수가 호출됩니다.
• 이때 window.removeEventListener('scroll',scroll)을 호출해서 이벤트 리스너를 제거합니다.

 

예시 타이머 

타이머를 설정하고 이를 정리하지 않으면 컴포넌트가 화면에서 사라져도 타이머가 계속 실행됩니다.

이를 방지하기위해 return 을 사용해서 타이머를 해제해야 합니다.