TIL_useEffect

박성훈·2022년 8월 10일

React

목록 보기

5/8

💡 Side Effect

함수 내의 어떤 동작이 함수 외부에 영향을 끼치는 경우

React에서 컴포넌트 안에서 fetch를 사용해 API를 가져오는 경우, 우리는 외부 환경에 접근해서 데이터를 가져온다.
또는 , EventListener를 사용하는 경우도 함수 안에서 EventListenr라는 메소드를 통해 DOM이라는 외부 요소에 접근해서 조작한다.

이런 경우를 Side Effect가 발생했다고 하는 것이다.

let sum = 0;

function add(num1, num2){
	sum = num1 + num2
}

add(3,4);

위처럼, add라는 함수내에서 num1과 num2의 합이 전역변수인 sum에 할당함으로써, 함수 외부의 데이터에 영향을 주고있다.
이러한 경우가 Side Effect 이다.

💡 Pure Function

순수함수 : 주어진 것을 이용해 본인의 역할만 잘 하는 함수

Pure Function은 Side Effect없이 어떤 전달인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다.

다시 말해, 전달인자만을 통해 함수의 결과를 리턴하고, 외부의 변수나 API를 이용하지 않는다는 것이다.

function upper(str){
	return str.toUpperCase();
}

upper('hello');

위처럼, upper라는 함수는 str이라는 전달인자만을 사용해서 결과를 리턴하고 있다.
upper함수가 언제, 어디서 쓰이든 결과는 충분히 예측된다.
이러한 함수를 Pure Function이라고 하는 것이다.

📌 React에서는 AJAX요청을 하거나, API를 사용하는 등의 경우는 모두 Side Effect이다.
그렇기 때문에, 이런 Side Effect를 잘 다루기 위해, Effect Hook을 제공한다.

💡 useEffect

컴포넌트안에서 Side Effect를 실행하기 위해 사용하는 Hook

우리가 리액트에서 AJAX 요청을 하거나 API를 이용하는 등 Side Effect를 실행한다면, 받아온 데이터를 기반으로 컴포넌트를 다시 랜더링 해줘야한다.

useEffect는 컴포넌트가 처음 랜더링될 때, 다시 랜더링될 때, 화면에서 사라질 때 특정 작업을 수행할 수 있도록 해주는 Hook이다.

📌 Hook 이란?
: 함수형 컴포넌트에서도 상태관리, 랜더링 직후 작업 설정등의 기능을 가능하게 해주는 React v16.8에 새로 도입된 기능

🔍 useEffect 사용하기

useEffect(Callback(),[dependency array])

useEffect는 다음 3가지 상황에서 특정 작업을 수행할 수 있도록 해준다.

컴포넌트가 랜더링될 때 (Mount)
컴포넌트가 Rerendering 될 때 (Update)
컴포넌트가 화면에서 사라질 때 (Unmount)

🖊 컴포넌트가 랜더링될 때

useEffect(() => {
	console.log('랜더링')
})

위처럼, useEffect의 인자로 콜백함수만 넣어줬을 경우, 컴포넌트가 랜더링될 때마다(처음 랜더링, 다시 랜더링) 콜백함수가 실행된다.

🖊 컴포넌트가 처음 랜더링, Rerendering될 때

📌 처음 랜더링될 때

useEffect(() => {
	console.log('처음 랜더링')
}, [])

useEffect의 두번째 인자로 빈 배열을 넣을 경우, 컴포넌트가 처음 랜더링 될 때만 콜백함수가 실행되고, 그 이후에는 실행되지 않는다.

📌 Rerendering될 때

const [state, setState] = useState('false');

useEffect(() => {
	console.log('state가 변할 때 랜더링')
},[state])

useEffect의 두번째 인자에 종속성 배열을 넣는 경우, 그 종속성 배열 안의 변수(종속성)의 값이 변경될 때, 그리고 처음 랜더링 될 때 콜백함수가 실행된다.

🖊 컴포넌트가 화면에서 사라질 때 (clean up)

useEffect(()=> {
	const timer = setInterval(() => {
    	console.log('타이머 돌아가는 중');
    }, 1000);
  
  	return () => {
    	clearInteval(timer);
      	console.log('타이머 종료!')
    }
}, [])