ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial

.

Lifecycle of components

Lifecycle

컴포넌트의 라이프 사이클이란 말 그대로 컴포넌트가 태어나서 죽을 때까지의 사이클을 말한다.

1. mounting: 컴포넌트가 프로젝트에 등장하고 화면에 보여지는 단계
2. updating: props의 변화 등으로 인해 해당 컴포넌트가 업데이트됨. 즉, 변화함.
3. unmounting: mounting의 반대로 사라지는 단계.

updating은 props, state의 변화 등으로 글씨가 보이거나 보이지 않거나, 내용이 바뀌거나 등의 상태를 말한다.

만약 showText버튼을 눌러서 글씨를 표현할 수 있는 div가 코드 안에 나타났다면, 처음으로 태그가 나타난 이 순간은 해당 div의 mounting이라고 할 수 있다.

그리고 input 필드에 내용을 입력해서 화면에 div 안에 표시되는 텍스트가 나타나기 시작했다면, 이것은 모두 updating이다.

unmounting은 어떻게 이해할 수 있을까??

UseEffect

useEffect(() => {console.log("component mounted")})

UseEffect는 어떠한 component가 mount될 때 어떠한 동작을 실행하게 해준다.

useEffect를 사용할 때는 해당 컴포넌트가 나타날 때 어떤 동작을 같이 실행시키고자 하는 경우이다. 즉, state change가 일어나는 경우라고 할 수 있다.

따라서 컴포넌트가 받는 props가 변하거나, component 안의 state가 변하는 등의 이유로 ui가 re-render될 때마다 useEffect가 실행된다고 할 수 있다.

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

useEffect 뒤에는 배열을 추가할 수 있는데, 이 배열은 useEffect를 어떤 요소들만 useEffect를 발동시킬 수 이쓴지 특정화 하는 것이다.

그러면 만약에 우리가 컴포넌트를 unmount할 때 특정 동작을 실행하도록 하고싶다면 어떻게 하면 될까?

useEffect(() => {console.log("component mounted");

	return () => {
    	console.log("component unmounted");
    }

};, [])

이렇게 하면 텍스트가 나타나고 업데이트 될 때는 component mounted가 뜨고, 업데이트를 지울 때는 component unmounted가 뜰 것이다.

어떤 component가 api에서 데이터를 가져와서 쓰고 있는데, component의 역할이 끝나면 api 데이터를 그만 써도 된다고 생각해보자.

만약 그렇다면, componet의 수명이 끝났을 때 api 데이터를 그만 쓰도록 하면서 실행되는 동작들을 정리해줄 수 있을 것이다.

React Strict Mode

<React.StrictMode> 라는 태그가 있다.

이 태그는 React의 컴포넌트가 만들어질 때 mount->unmount->mount의 과정으로 태그를 검증해준다고 한다.