[React] Lifecycle 제어하기

리액트를 함수형 컴포넌트를 사용하면서 unMount는 어떻게 잡는지 제대로 알지 못했는데, 이번에 공부하면서 알게 되었다.

 

먼저 Lifecycle이란

https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0

화면에 있는 컴포넌트들이 생성될 때 발생하는 과정을 말한다.

이런 과정 제어하는데, Hooks를 사용하면서 클래스형보다 좀 더 편하고 안전하게 사용할 수 있게 됐다.

 

간단하게

생성

수정

제거

3단계로 나눠서

생성은 화면에 나타나는 것 - Mount

수정은 말 그대로 업데이트(re-render) - Update

제거는 화면에서 사라지는 것 - UnMount

 

이를 코드로 나타내면

// 생성 & 제거
useEffect(() => {
	console.log("Mount!");
    
    return () => {
    	console.log("UnMount!");
    }
    
}, []);

// 수정
useEffect(() => {
	console.log("Update");
}, [name]);

 

useEffect를 사용하면서 생성, 수정은 자주 사용했지만, 제거는 사용을 안했던 것 같다.

공부할 수록 기존에 만든 코드에서 수정할 부분이 많아지는 것 같다.

 

 

 

- 참고

https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0

https://ko.reactjs.org/docs/hooks-effect.html