UseEffect

민겸·2022년 10월 3일
0

React

목록 보기
4/6
post-thumbnail

이 글은 공식문서벨로퍼트님의 글을 기반으로 작성되었습니다.

오늘은 리액트 훅 중 하나인 useEffect 에 대해서 알아보자.

useEffect

useEffect는 함수를 인자로 받고 useEffect의 인자로 들어간 함수는 컴포넌트 렌더링이 끝난 후 한 번 실행된다. 그리고 특정 값이 변경되었을 때 다시 실행되게 할 수도 있다.

useEffect(() => {
	실행할 함수...
},[])

위의 useEffect가 선언된 컴포넌트는 첫 렌더링이 끝난 후 단 한 번만 실행된다. 대괄호 부분은 dependencies array로 의존성 배열이다. 의존성 배열을 빈 배열로 만들면 첫 렌더링 때 단 한 번만 useEffect를 실행되게 할 수 있고, 의존성 배열에 특정 변수를 넣게 되면 변수의 값이 변할 때 마다 useEffect가 실행된다.

useEffect는 함수를 반환할 수 있는데 이 함수를 클린업 함수(cleanup function)라고 부른다. 클린업 함수는 컴포넌트가 사라질 때 실행된다. 그 특성으로 useEffect 함수에 대한 뒷정리를 해줄 수 있다.
예를 들면, setIntervalsetTimeout이 적용된 작업들을 clearInterval로 정리할 때 사용할 수 있다.

일반적으로, useEffect 내부에서 실행되는 함수에 사용되는 상태가 있다면, 그 상태를 useEffect의 의존성 배열에 넣어주는 것이 원칙이다. 만약 의존성 배열에 넣지 않게 되면 useEffect가 다시 호출되었을 때, 실행되는 함수의 상태는 최신 상태가 아니게 된다.

profile
안녕하세요! 주니어 프론트엔드 개발자입니다.

0개의 댓글