useEffect()

React.useEffect(() => {
	return () => {
	};
}, []);

// 1. 컴포넌트의 첫 렌더링 시 arrow function 무조건 실행
// 2. 두번째 렌더링은 arrow function을 무조건 실행하지는 않는다.
// 의존성 배열(dependency array)에 들어가있는 요소를 확인하고 바뀐게 있을때만 실행한다.
// 만약 의존성 배열을 비워놨으면 첫 렌더링 시 함수만 한 번 실행하고 함수는 이제 실행되지 않는다.
// 3. arrow function의 return 내부는 clean up 부분이다.
// 즉, 컴포넌트가 화면에서 사라질 때 동작하는 걸 넣어두자.

• argument로 콜백함수랑 배열을 넘겨준다.
  • 콜백 함수 : 리액트가 비동기로 실행할 함수
  • 배열 : 의존성 배열

• 클래스 컴포넌트에서 라이프 사이클 함수인 componentDidMount, componentDidUpdate, componentWillUnmount 를 합쳐둔 것이라고 생각하면 좋다.

실행 순서

1. useEffect() 가 있는 컴포넌트가 렌더링이 되면 우선 한 번 실행된다.
2. useEffect() 함수에 있는 콜백 함수를 예약해뒀다가 렌더링이 끝나면 실행한다. 이 때, 의존성 배열에 들어있는 값도 기억해둔다.
3. 콜백 함수를 실행해서 state가 변경된다면 다시 렌더링이 되서 컴포넌트 함수가 실행되고 useEffect() 도 다시 실행된다.
4. 이 때 앞에서 기억했던 의존성 배열과 현재 실행되는 의존성 배열의 값을 비교한다. 값이 다를 경우 콜백 함수를 실행한다.
5. 의존성 배열을 빈 배열로 두면 비교해도 똑같으니까 콜백함수를 실행하지 않는다. 즉, 맨 처음 렌더링 시에만 콜백함수가 실행되고 그 이후에는 실행되지 않는다.

예시

컴포넌트가 처음 렌더링될 때 request를 보내고 싶으면 useEffect()를 사용한다.

const handleLoad = async () => {
  const { foods } = await getFoods();
  setItems(foods)
}

useEffect(() => {
  handleLoad();
}, []);

함수형 컴포넌트에서 addEventListener 는 어디에 붙여야할까?
DOM이 있어야 이벤트가 발생할 수 있으므로 클래스 컴포넌트의 componentDidMount 위치와 같은 곳에 있어야한다. 즉, userEffect 안에다 넣어줘야한다.

참조 블로그
(예시가 많아서 좋음) 독일 개발자 초록이 - React hooks 리액트 훅 useEffect란?
자라는 것을 잘하는 개발자 - React Hooks : useEffect() 함수