useEffect

useEffect란?

부수효과(sideEffect)가 일어날 수 있는 코드를 작성하기 위한 hook이라고 볼 수 있습니다.

1-1. 프로토타입 - useEffect (setup callback, dependency array)

 

1. setup callback

선택적으로 Effect 작업을 마치고 마무리로 수행할 로직이 작성된 clean up 함수를 반환할 수 있습니다.

 

컴포넌트가 초기에 마운트되거나 의존성 배열 내에 작성된 값이 변경됨에 따라 useEffect가 다시 호출되면 clean up 함수와 setup call back이 호출됩니다.

 

이후 DOM에서 useEffect를 사용하는 컴포넌트가 제거될 경우 React는 clean up 함수를 호출합니다.

 

 

2. dependency array - (optional)

의존성 배열이라고도 하며, 배열 내 요소로 작성된 값이 변경될 경우 useEffect가 다시 호출되며, 배열 내 요소로 작성할 수 있는 setup callback 내부에 작성된 상태값들로 한정됩니다

예를들면, props나 state혹은 컴포넌트 내부에 작성된 변수나 함수 등이 해당됩니다.

 

 

2. 컴포넌트의 생명주기

1. Mount (생성)

컴포넌트가 페이지에 처음 렌더링(Mount) 되었을 때

 

2. Update (갱신)

useState hook을 통해 상태를 변경하거나 Props를 통해 전달받은 값이 변경되어 컴포넌트가 다시 렌더링 되었을 때

 

3. Unmount (제거)

페이지에서 해당 컴포넌트를 렌더링하지 않을 때

 

 

 

정리하면, 라이프사이클이란 페이지에 UI를 나타내기 위해 컴포넌트가 생성되는 시점부터 페이지에서 더 이상 필요가 없어져 제거되기 까지의 과정에서 개발자가 특정 시점에 개입하여 원하는 작업을 수행할 수 있도록 React에서 제공하는 함수.