useEffect
Hook-Effect
https://ko.legacy.reactjs.org/docs/hooks-effect.html
https://ko.legacy.reactjs.org/docs/hooks-effect.html
Effect는 메모리정하는 Hook
함수형 컴포넌트에서 사이드 이펙트를 처리하는 훅이다.
사이드이펙트(부수효과)란?
컴포넌트의 렌더링 외에 발생하는 모든 동작을 말 하며,
-
데이터 가져오기
-
구독(subscrption)
-
타이머설정
-
DOM 직접조작 등이 있다.
side effect가 무엇인지 이해하려면 먼저 순수 함수의 개념을 이해해야한다.
1. 순수함수란?
대부분의 React컴포넌트는 순수 함수로 만들어졌다.
function MyReactCompoent(){}순수 함수(pure function)
1. 동일한 Input에 동일한 OutPut
2. 부작용(side-effect)가 없다, 즉 예측하기 쉽다.
3. 테스트하기 쉽다.
출처: https://choar816.tistory.com/163
2. React에서의 side effect
일반적인 sideeffect로는 다음과 같은 것들이 있다.
- 벡엔드서버에 API로 데이터 요청
- 브라우저 API와 상호작용(document, window 직접 입력)
- setTimeout, setInterval등 예측할 수 없는 타이밍 함수 사용
useEffect는 React컴포넌트에서 이러한 side effect들을 처리하는 방법을 제공하기 위해 존재한다.
즉 해당 컴포넌트의 렌더링이 끝난 후 수행되어 다른 요소와의 사호작용에 영향을 미치지않게하는 도구이다.
3. useEffect 기본문법
import {useEffect} from 'react';
useEffecr(()=> {
//실행코드 (side effect)
return () => {
//정리(clean-up)코드
}
}, [의존성 배열])
매개변수 설명
- 첫 번째 매개변수: 콜백함수를 받는다. 이 함수는 컴포넌트가 렌더링된 후실행된다, 즉 컴포넌트가 DOM에 렌더링된 직후 실행
- 두번째 매개변수: useEffect는 선택적으로 의존성배열을 두번째 매개변수에 받는다. 이 배열이 변경되면 첫번째 매개변수를 실행할지 결정한다.
4. useEffect의 동작
- 컴포넌트가 처음 렌더링될 때 실행
- 의존성 배열(2번째 매개변수)에 있는 값들이 업데이트될 떄마다 다시 실행
- 컴포넌트가 사라질 때 정리작업수행 가능
5. 의존성 배열의 동작
- 의존성배열이 없는 경우: 컴포넌트가 렌더링될때마다 매번 useEffect가 실행된다.
useEffect(() => { console.log('렌더링될떄마다 실행') });
- 빈 배열([]): 의존성 배열이 빈 배열이면 컴포넌트가 처음 렌더링될 때 한번만 실행된다
useEffect(() => { console.log('처음 렌더링될 떄 한번만 실행.') }, [] );
- 특정 값이 있을경우: 의존성배열에 변수를 넣으면 해당 값이 변경될 떄 useEffect가 실행
useEffect(() => { console.log('count값이 변경될떄마다 실행.'); }, [count])
clean-up 함수
useEffect는 정리(clean-up)함수를 반환할 수 있다. 이 정리함수는 컴포넌틑가 운마운트되거나 이펙트가 재실행되기 직전에 실행된다.
주로 타이머해제, 구독취소등의 메모리 누수방지에 사용된다.
useEffect(() => {
const timer = setInterval(() => {
console.log('타이머 실행')
}, 1000) 1초마다 실행
return () => {
clearInterval(timer); //타이머 정리
console.log('타이머 정리됨')
}
}, [])useEffect의 사용 사례
- 데이터 가져오기(API 요청): 컴포넌트가 처음 렌더링될 때 데이터를 가져오는 경우.
useEffect(()=> {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
- 이벤트 리스너 추가 및 제거: 컴포넌트가 마운트될 때 이벤트 리스너를 추가하고, 언마운트될 때 제거하는 경우
useEffect(() => {
const handleResize = () => {
console.log('윈도우 사이즈 변경됨')
}
window.addEventListener('resize', handleResize)
return()=> {
window.removeEventListener('resize', handleResize)
}
}, [] );
- 타이머 사용: 타이머를 설정하고, 컴포넌트가 사라질 때 타이머를 해제하는 경우
useEffect(() => {
const timer = setTimeout(() => {
console.log('타이머 실행')
}, 3000)
return () => {
clearTimeout(timer)
}, [] );의존성 배열 관리 주의점
useEffect에서 의존성 배열을 사용할 때, 의존성 배열에 넣어야할 값들을 정확하게 지정해야한다.
만약 의존성 배열을 잘못 설정하면, 원하는 시점에 실행되지않거나 불필요한 렌더링이 발생할 수 있다.
- 상태값이나 props등, 이펙트에서 사용되는 모든 외부값들은 의존성배열에 포함되어야한다.
- 하지만 필요없는 값이 포함되면 이펙트가 불필요하게 실행될 수 있기 때문에 신중하게 관리해야한다.
