React - useEffect

개요

리액트 훅 중 useState 다음으로 자주 쓰이는 훅이다. 흔히 useEffect의 정의에 대해 물어보면 돌아오는 답변은 다음과 같다.

• 콜백과 의존성 배열을 인수로 받아, 의존성 배열의 값이 변경되면 콜백을 실행하는 함수이다.
• 컴포넌트의 생명주기 메서드와 비슷한 작동을 구현하는데, 의존성 배열에 빈 배열이 들어가면 컴포넌트가 마운트될 때만 실행된다.
• 클린업 함수를 반환하기도 하는데, 이 클린업 함수는 컴포넌트가 언마운트될 때 실행된다.
  하지만 이들은 정확한 정의로 보기는 어려운데, useEffect는 생명주기 메서드를 대체하기 위해 만들어진 훅이 아니기 때문이다.

정확한 정의를 내리면 다음과 같다.

애플리케이션 내 컴포넌트의 여러값들을 활용해 동기적으로 side effect를 만드는 메커니즘이다. 그리고 이 부수효과가 언제 발생하는지보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요하다

useEffect란 ?

function componenet(){
  useEffect(() => {}, [])
}

첫번째 인수로는 side effect가 포함된 함수를, 두번째 인수로는 의존성배열을 전달한다.
우리는 이미 의존성 배열의 값이 변경될 때마다 콜백을 실행하는 것을 알고 있다.

...

()