useEffect Hook

React Component가 처음으로 화면에 나타나거나 사라질때 특정 작업가능
컴포넌트의 어떤 props의 상태가 바뀌어서 업데이트 될 때,
즉 리렌더링 될 때마다 호출되는 기능

사용하기 위해선

import {useEffect} from 'react';

로 import를 먼저 진행해줘야 함

useEffect(() => {
	console.log('컴포넌트 화면 출력');
}, []);

사용법은 위와 같은 형식인데 뒤에 []를 deps라고 부름
이 공간이 비어있으면 처음으로 화면에 나타날 때 이후로는 useEffect를 수행하지 않음

useEffect(() => {
	console.log('컴포넌트 화면 출력');
  return() => {
    console.log('컴포넌트 제거됨');
  }
}, []);

return을 해주는 건 해당 Component가 사라질 때만 출력되는 일회성 함수

Component가 화면에 처음으로 나타나는 순간을 mount라고 부름
반대로 사라지는 순간은 unmount라고 부름

mount에선 REST API나 비동기작업, props등에 대한 처리를 할 수 있음
unmount에선 mount에서 해줬던 작업을 처리 후 종료해줄 때 사용

아까 []에 대해서 빠르게 언급했는데,
[]안에 어떤 값이 들어있으면, 즉 deps가 채워져 있으면, 그 deps안의 값이 변경될 때마다 useEffect가 호출됨
물론 그 말은 mount시에도 호출됨

아예 빈 값으로

useEffect(() => {
	console.log('컴포넌트 화면 출력');
});

이렇게 해주면, 모든 Component가 하나의 Component가 렌더링 되도 같이 리렌더링이 발생함