by Meds Safety https://medssafety.com/side-effects-vs-adverse-effects-vs-contraindications/

useEffect?

the hook that manages side-effects in functional React components.

useEffect 훅은 함수형 컴포넌트의 side-effect를 관리하기위해 사용됩니다.

side-effect?

Side effects are all the operations that affect your component and can’t be done during rendering.

리액트의 함수형 컴포넌트에서 side-effect란 렌더링중에는 완료되지 못하지만 컴포넌트에 영향을 미치는 작업을 말한다.
fetching data manually chaning DOM 과 같은 작업이 대표적인 예이다.

useEffect()

useEffect(callback[, dependencies]);

useEffects는 콜백함수와 의존성 배열을 인자로가진다.

첫번째 인자 : 콜백함수는 돔에 변화가 push 되었을떄 실행된다.
두번째 인자 : depencies 는 의존성 배열이라고 불러지며 어떻게 작성되어있느냐에 따라 useEffect의 동작방식이 달라진다.

Dependencies argument

1. 의존성배열 없음: 리렌더링이 될때마다 콜백함수가 실행된다.

2. 의존성배열에 빈값: 컴포넌트가 마운트된이후 딱 한번만 콜백함수가 실행된다.

3. 의존성배열에 props 혹은 state: 컴포넌트가 마운트된이후 한번만 실행되며 그 이후에는 배열안의 값들이 변경될때만 콜백함수가 실행된다.

example

컴포넌트가 처음 마운트될때 useEffect의 콜백함수가 한번실행되고 그 이후에는 name state에 변경이 있을 때 마다 실행된다.