#5 React - useEffect()로 컴포넌트 생명주기(LifeCycle) 제어하기

오늘은 컴포넌트의 LifeCycle, 즉 탄생 - 변화 - 죽음 각각의 상황마다 원하는 코드를 실행시킬 수 있는 useEffect()에 대해 정리해보려고 한다! 0. useEffect()에 대한 간단한 소개 useEffect()는 컴포넌트의 생명 주기(LifeCycle)에 따른 작업을 수행할 수 있게 해준다.

컴포넌트의 생명 주기란 컴포넌트가 탄생하고, 변화하고, 죽을 때까지의 Cycle을 말한다. 더 구체적으로 이야기하자면, 컴포넌트 탄생 -> 컴포넌트가 화면에 렌더링됨.

[Mount] 컴포넌트 변화 -> 컴포넌트가 화면에 리렌더링됨. [Update] 컴포넌트 죽음 -> 컴포넌트가 화면에서 사라짐.

[Unmount] 이 세 가지 상황마다 원하는 동작을 수행하게 해주는 것이 useEffect이다. 말로만 설명하면 어려우니, 실제로 사용해보자!

1. Mount 시 -> "빈 배열" 컴포넌트가 화면에 렌더링되는 시점(Mount)에 콘솔창에 Mount!

를 출력시켜보자. 간단하게 버튼을 클...