useEffect 란 무엇인가?

useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 되는데

첫번째!

페이지가 처음 렌더링되고난 후 useEffect는 무조건 한번 실행된다.

두번째! useEffect 배열로 지정한 useState의 값이 변경되면 실행되게 된다.

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

useEffect는 기본적으로 콜백함수를 부르게 되며 렌더링 혹은 값 오브젝트의 변경에따라
어떠한 함수 혹은 여러 개의 함수들을 동작시키는 기능을 가진다.

useEffect의 사용용도로 예를 들어보면

useEffect (() => {});

// 

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

//

const [name,setName] = useState();
useEffect(() => {}, [name])

다음이 useEffect를 사용할 때 기본형태이며

첫번째는 Dependency가 없기 때문에 계속 useEffect가 발동되어 불필요한 실행이 너무 많아져 잘 사용하지않는형태이고

두번째는 useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 사용하는 방법이다.
콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어있으며
이곳에 Dependency 를 지정한다.
하지만 아무 변수나 값 없이 대괄호만 있다면,
이 useEffect는 렌더링 후 단 한번만 실행된다

세번째 useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행하는 코드이다 이렇게 Dependency 를 지정해주어 지정된 변수의 값이 변했을 때만,
실행하게 된다.

정리하면

useEffect는 어떠한 값의 변화를 감지했을때 실행되어 특정 함수나 작업을 실행하는 함수이고 useEffect는 콜백 함수를 가지며, Dependency는 있을수도 없을수도있다.
useEffect는 무조건 렌더링 후 한번 실행되기때문에
불필요한 동작없이 잘 활용하면 여러기능들을 효율적으로 구현할 수 있다.