프론트엔드/React

useEffect()

bread-gee 2023. 12. 13. 18:51

🔥함수형 컴포넌트 기반으로 정리를 했습니다!

 

Side effects를 수행하기 위해 사용되는 Hook

Side effects는 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등과 같은 작업을 말한다.

useEffect는 컴포넌트 렌더링 후에 실행되는데, 이는 렌더링 결과가 화면에 이미 반영된 후에 Side effects를 수행할 수 있게 해준다.

useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 컴포넌트 생명 주기 관련된  여러 시점에서 Side effects 를 실행할 수 있다.

 

useEffect(() => {
	// Side effects를 수행하는 코드
	// 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등

	// clean-up 함수 (선택적)
	return () => {
		// clean-up 작업을 수행하는 코드
		// 컴포넌트가 마운트 해제될 때 실행될 정리 작업을 수행
		// ex. 이벤트 리스너 해제, 구독 해제, 타이머 정리 등
 	};
}, [dependencies]);

 

useEffect는 두개의 매개변수를 갖는다.

📌 Side Effect 함수

첫 번째 매개변수로 전달되는 Side Effect 함수는 컴포넌트가 렌더링 될 때마다 실행된다.

컴포넌트가 화면에 렌더링이 완료되고, 실제 DOM이 업데이트된 후에 실행된다.

Side Effect 함수 안에서 비동기 작업을 수행하거나 외부 리소스에 접근할 수 있다.

 

📌 의존성 배열

두 번째 매개변수인 의존성 배열은 Side Effect 함수가 의존하는 값들로 구성되어 있다.

항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 한다.

배열에 포함된 값들 중 하나라도 변경되면 Side Effect 함수가 실행된다.

 

🔥의존성 배열을 빈 배열([])로 설정하면 컴포넌트가 마운트될 때 한 번만 실행되며, 특정 상태 값이나 프로퍼티에 의존하는 경우 해당 값을 감시하고 변경이 있을 때에만 실행할 수 있다.

🔥의존성 배열을 생략하면 컴포넌트가 렌더링 될 때마다 Side Effect 함수가 실행된다.

 

🌀의존성 배열에 추가해야 하는 값들

  • 컴포넌트 내부의 상태 변수
    useState나 useReducer를 통해 생성한 상태 변수를 useEffect 콜백 함수 내에서 사용하는 경우,
    상태 변수가 변경될 때마다 useEffect 함수가 재실행되어 원하는 동작을 수행할 수 있게 하려면 의존성 배열에 추가해야 한다.
  • 외부 데이터
    컴포넌트 외부에서 받아오는 데이터(외부 props, 전역 상태 등)를 사용하여 컴포넌트 내부의 동작이나 렌더링 결과가 달라져야 할 때, 해당 데이터를 의존성 배열에 추가해야 한다.
  • 외부 함수 또는 라이브러리
    외부 함수가 변경될 때마다 useEffect 함수를 다시 실행하고 싶다면 해당 함수를 의존성 배열에 추가해야 한다.

 

🌀의존성 배열에 추가해야 하는 값들에 대한 예외 상황

  • 컴포넌트 내부의 상태를 업데이트하는 함수(ex. setState)
    useReducer나 useState의 state 업데이트 함수는 변경되지 않도록 리액트가 불변성을 유지하므로 의존성 배열에 추가할 필요 없다.
  • 브라우저의 내장 API나 함수(ex. fetch(), localStorage 등)
    React의 렌더링 주기와 직접적인 관련이 없다. 브라우저의 내장 API나 함수는 전역적으로 사용 가능하며, 렌더링 주기와 관계없이 항상 동일한 동작 하기 때문에 의존성 배열에 추가할 필요 없다.
  • 외부에서 정의된 변수나 함수
    외부에서 정의된 변수나 함수 외부에서 정의된 변수나 함수는 구성 요소 함수 내부에서 직접 생성되지 않는다. 외부 스코프에서 가져와 사용되지만, 이 외부 값이 변경되더라도 구성 요소는 다시 렌더링되지 않기 때문에 의존성 배열에 추가할 필요 없다.
    함수 컴포넌트 외부에서 사용된 변수나 함수 외부에서 가져온 변수나 함수는 보통 함수 컴포넌트가 생성될 때 한 번만 연결되기 때문에, 해당 값을 의존성 배열에 추가할 필요가 없다. 외부에서 가져온 값들은 함수 컴포넌트의 렌더링 주기 동안 변경되지 않기 때문이다.
  • 1.  2. 

 

📌 Clean-up 함수

Clean-up 함수는 선택적으로 사용되고, Side Effect 함수 내에서 반환해주면 된다.

Clean-up 함수는 컴포넌트가 unmount되거나 부수 효과가 재실행되기 전에 실행되며, 주로 구독을 해제하거나 타이머를 정리하는 등의 작업에 사용된다.

 

🔥생명주기와 클린업 함수의 역할

  • useEffect 함수를 한번 실행하고, 재실행하기 전에 Clean-up 함수를 실행한다.
    최초 useEffect 함수 실행 시 Clean-up 함수는 실행되지 않는다.
    Clean-up 함수는 useEffect 함수가 새로 실행되기 전에 정리(clean-up) 작업을 수행할 수 있도록 하는 함수이기 때문이다.
  • 컴포넌트가 DOM에서 마운트 해제될 때마다 클린업 함수가 실행된다.
    = 컴포넌트가 언마운트(unmount)되는 시점에서 클린업 작업을 수행하도록 하는 것
    => 또한, 컴포넌트가 재사용될 때마다도 클린업 함수가 실행된다.

🌀 종속성이 있을 땐,

useEffect 함수가 실행되기 전(첫 실행 제외하고) 클린업 함수가 실행됨.

 

🌀 종속성이 빈배열일 땐,

클린업 함수는 컴포넌트가 DOM에서 제거되면 실행 됨.

저작자표시 비영리