useEffect란 무엇인가?

useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면,
그것을 인지하고 업데이트 해주는 함수

기본적인 몇 가지 조건에 의해 작동하게 된다.
1. 페이지가 처음 렌더링되고 난 후 useEffect는 무조건 한 번 실행된다
2. useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 된다.

useEffect 사용하는 방법

1. 가장 기본적인 형태

useEffect(() => {});

이런 형태는 거의 사용하지 않는다.
렌더링을 할 때 한 번 그리고 어떠한 작은 요소라도 변화한다면 계속 발동되에
불필요한 실행이 많아진다.

2. 렌더링 후 단 한번만 실행하고 싶을 때

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

콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어있다.
그곳에 Defency를 지정한다.
하지만 값이 없다면 렌더링 후 단 한번만 실행되고 실행되지 않는다.

3. 배열 안 변수의 값이 변할때마다 실행하는 코드

const [name, setName] = useState("")

useEffect(() => {}, [name])

이렇게 사용한 Dependency를 지정해주어 지정된 변수의 값이 변했을때만 실행되게 됩니다.