useEffect

👻useEffect

1. 역시 컴포넌트 상단에서 useEffect를 호출한다.
2. 처음 돔을 그릴 때에 실행되고, optional한 clean up함수가 있으면
3. 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook

기본형태

useEffect(function, [, deps])

function

• 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.)
• effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다.

clean up

return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고도 한다.

• useEffect 안에서 return 할 때 실행 된다.(useEffcet의 뒷정리를 한다.)
• 언마운트 될 때만 실행하고 싶을 때: 두번째 파라미터로 빈 배열을 넣는다.
• 특정값이 업데이트 되기 직전에 실행하고 싶을 때: deps 배열 안에 검사하고 싶은 값을 넣어준다.

deps

배열 형태이며 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

• 컴포넌트가 화면에 가장 처음 렌더링 될 때 한번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다. 만약 배열을 생략한다면 리렌더링 될 때마다 실행된다.
• 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

반환값

useEffect의 반환값은 undefined

주의사항

1. hook 이므로 컴포넌트 상단에서만 부를 수 있다. 반복문이나 조건문 안에서 사용할 수 없다. 만약 필요하다면 새로운 컴포넌트를 만들고 상태를 그 안에 넣어야 한다.
2. 외부 시스템과 동기화하지 않을 것이면 useEffect는 필요하지 않다.
3. dependencies가 컴포넌트 안에 정의되어 있으면 useEffect를 필요 이상으로 동작하게 할 수 있다. 만약 useEffect가 어떤 시각적인 것이라면 연기는 공지되어야 하고 아마 useLayoutEffect로 교체해야 할 필요가 있을 수도 있다.
4. 만약 상호작용으로 일어나는 것이라면(예를 들면 클릭), 브라우저는 아마도 useEffect안의 상태가 업데이트 되는 과정 전에 다시 그릴 것이다. 하지만 브라우저가 화면을 새로 그리는 것을 막아야 한다면 아마 useLayoutEffect로 교체해야 할 필요가 있을 수도 있다.
5. 오직 클라이언트 쪽에서만 실행을 하고, 서버 렌더링동안에는 실행되지 않는다.