useEffect와 라이프사이클

https://ko.react.dev/reference/react/useEffect

useEffect – React

 

한마디로 외부 시스템과 컴포넌트를 동기화 하는 리액트 훅이다.

외부 시스템 : 브라우저API, 서버 통신 등 리액트에서 제어되지 않는것들.

 

기본 문법

useEffect(()=>{},[]);
두가지의 인자를 받는다.
1. 콜백함수
2. 의존성 배열

 

시점 : 컴포넌트가 랜더링 된 이후에 실행된다.

 

의존성배열이 빈값일때  [] : 처음 마운트 될때만 실행된다. 

의존성 배열이란 ? 

배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행하게 된다.

 

clean up

컴포넌트가 나타났을때 (랜더링 되었을때 = 함수컴포넌트가 실행되었을때) 동작하는것은 useEffect의 effect함수이다.

그럼 컴포넌트가 사라졌을때? 이 과정을 클린업(clean up)이라고 표현한다.

 

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수
		}
	}, [])

	return <div>hello react!</div>
};

export default App;

 

해당 컴포넌트를 벗어나면 effect 내부에 return을통해 언마운트 되었을때 작성한 코드가 실행된다.

 

라이프사이클

컴포넌트가 생성되고, 업데이트되고, 제거되는 과정을 관리하는 일련의 메서드들이다.

 

• Mountuing 마운트

컴포는트가 처음 화면에 랜더링 될 때 발생하는 단계

• Updating 업데이트

컴포넌트의 state나 props가 변경될 때 발생하는 단계

• Unmounting 언마운트

컴포넌트가 DOM에서 제거될 때 호출되는 메서드