6. useEffect

useEffect는 기본적으로 SideEffect(부수 효과)가 일어날 수 있는 코드를 작성하기 위한 hook이라고 볼 수 있음

외부 세계와 소통하는 코드는 useEffect 내부에 작성하고, useEffect 밖에 작성해서 비즈니스 로직을 더럽히지 말도록 하기 위함

즉 SideEffect(부수 효과)가 일어날 수 있는 코드는 useEffect 내부에 작성

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

useEffect(setup, dependencies);

1-1-1. 파라미터

1. setup callback useEffect 내에서 수행시킬 로직을 작성할 콜백함수

setup callback은 선택적으로 Effect 작업을 마치고 마무리로 수행할 로직이 작성된 clean up 함수를 반환할 수 있음

const [count, setCount] = useState(0);
 
useEffect(() => {
	// effect 로직
 
	return () => console.log('clean up');
}, [count]);

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

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

2. dependency array - (optional) 의존성 배열이라고도 하며, 배열 내 요소로 작성된 값이 변경될 경우 useEffect가 다시 호출되며, 배열 내 요소로 작성할 수 있는 값은 setup callback 내부에 작성된 상태값들로 한정됨

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

1-1-2. 반환 값(return)

useEffect hook은 undefined를 반환

2-2. SideEffect, 부수효과

외부 API 호출, 전역 변수의 값 변경, DOM 업데이트 등 UI 자체를 렌더링하는 순수한 React 컴포넌트의 역할 외 다른 작업을 수행하여 발생하는 효과(Action)를 의미

2. 컴포넌트의 수명주기, LifeCycle

컴포넌트의 라이프사이클은 아래와 같이 크게 3가지로 구분

1. Mount ( 생성 )

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

2. Update ( 갱신 )

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

3. Unmount ( 제거 )

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

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

함수형 컴포넌트에서는 useEffect hook을 통해 컴포넌트의 라이프사이클에 개입할 수 있음