⏱️컴포넌트의 라이프사이클

라이프사이클(LifeCycle) 

= 생애주기 

Mount => Update => UnMount

 

Mount

• 탄생
• 컴포넌트가 탄생하는 순간
• 화면에 처음 렌더링 되는 순간

Update

• 컴포넌트가 다시 렌더링 되는 순간
• 리렌더링 될 때를 의미

UnMount

• 컴포넌트가 화면에서 사라지는 순간
• 렌더링에서 제외되는 순간을 의미

 

useEffect

리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅

 

사이드 이펙트

: 컴포넌트 동작에 따라 파생되는 여러 효과

useEffect(()=>{
	console.log(`count:${count}`);
},[count,input]);

// 의존성 배열
// dependency array
// 의존성 배열 내의 값이 바뀔 때마다 콜백 함수를 실행

 

useEffect 로 라이프사이클 제어하기

 

1. 마운트 : 탄생

useEffect(()=>{
	console.log("mount");
},[]);

• 의존성 배열이 빈 배열([ ]) 일 때, 컴포넌트가 최초 마운트될 때 한 번 실행된다.
• 이후 리렌더링이 발생해도, 의존성 배열이 빈 배열이기 때문에 다시 실행되지 않는다.

2. 업데이트: 변화, 리렌더링

useEffect(()=>{
	console.log("update");
});

• 의존성 배열을 아예 만들지 않는 경우, 컴포넌트가 리렌더링될 때마다 매번 실행된다.

3. 언마운트: 죽음

useEffect(()=>{
	// 클린업, 정리 함수
	return ()=>{
    	console.log("unmount");
    };
},[]);

 

 

 

 

 

---

출처

 

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지