React Hooks🪝useEffect

리액트로 프로젝트를 진행하다보면 useEffect를 반드시 한 번은 사용해야할 상황이 온다. useEffect는 컴포넌트의 생명주기 동안 발생하는 여러 작업(데이터 패칭, 구독 설정, 타이머 설정, 상태 변화 감지 등)을 처리하는 데 필수적인 훅이다.

그럼 useEffect란 무엇이며 어떤 형태들이 존재하는지 알아보자!

 

useEffect란

컴포넌트가 마운트 되었을때, 업데이트 되었을때, 언마운트 되었을때 특정 작업을 실행시켜주고 싶다면 useEffect를 사용해야한다. 

 

기본적으로 useEffect 훅은 인자로 콜백함수를 받으며, 원하는 작업의 코드를 콜백함수 내부에 작성해주면 된다.

콜백함수란,  다른 함수의 인자로 전달된 함수를 의미한다. 

 

useEffect의 형태

1.

첫 번째 형태로는, useEffect의 인자로 하나의 콜백함수를 받는 형태이다.
이 형태는 컴포넌트가 렌더링 될때마다 실행된다. ⚙️컴포넌트가 화면에 맨처음 렌더링 될 때, 컴포넌트가 다시 렌더링 될 때 실행된다.

 

2.

두 번째 형태는 첫번째 인자로 콜백함수, 두번째 인자로 배열을 받는다. 이 배열을 dependency array 라고 한다.
매번 렌더링이 될 때마다 실행되는게 아니라, ⚙️컴포넌트가 화면에 맨처음 렌더링 될 때,  배열안에 들어있는 값이 변할 때 실행된다.

 

⚙️만약 빈배열을 넣어준다면 화면에 맨처음 렌더링 될 때만 실행된다.

 

코드로 보는 useEffect

// 초기 렌더링 + 렌더링마다 매번 실행됨
useEffect (() => {
	console.log('렌더링 🎨'); 
});

// 초기 렌더링시에만 실행
useEffect (()=> {
	console.log('마운팅 🌱');
}, []);

// 마운팅 + count가 변할때마다 실행 
useEffect (()=> {
	console.log('count 변화 💯');
}, [count]);

// 마운팅 + name이 변할때마다 실행
useEffect (()=> {
	console.log('name 변화 ⭐');
}, [name]);

 

 

 

Clean Up

useEffect에 이벤트리스너를 작성했다면, 등록한 리스너를 제거할 수 있는 Clean Up, 즉 정리작업도 작성해줘야한다.
ex) 타이머를 시작했다면 -> 타이머가 필요없을 때 타이머를 멈추는 작업 / 구독을 했다면 -> 구독해지

이러한 정리작업을 처리해주려면 useEffect의 return 값으로 원하는 정리 작업의 함수를 넣어주면 된다.
함수를 return해주면 해당 컴포넌트가 언마운트 될 때 혹은 다음 렌더링시 불릴 useEffect가 실행되기 전에 그 함수가 실행된다.

 

코드로 보는 Clean Up 

const Timer = (props) => {
	useEffect(() => {
		const timer = setInterval(() => {
          console.log('타이머 돌아가는 중 ...'); 
        }, 1000); 
        
        return () => {
          cleanInterval(timer);
          console.log('타이머가 종료되었습니다.');
        };
     }, []);

 

 

 

 

✨별코딩님의 useEffect 강의를 수강하면서 정리한 내용입니다. ✨ 

잘못된 내용이나 부족한 부분에 대한 피드백은 언제나 환영입니다!