📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4

📜 Chapter

useRef, ref, forwardRef

useCallback

useLayoutEffect

Reconciliation

‣

‣

useEffect

• useEffect
• useEffect 함수는 React component가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
• useEffect는 component들이 render와 paint된 후 실행된다. → 렌더링 이후에 발생한다.
• 비동기적(asynchronous)으로 실행된다.
• paint된 후 실행되기 때문에, useEffect 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 된다.
• useEffect는 component가 mount 되었을 때, component가 unmount 되었을 때, component가 update 되었을 때 특정 작업을 처리 할 수 있다.
• 즉, 클래스형 component에서 사용할 수 있었던 생명 주기 메서드를 함수형 component에서도 사용 할 수 있게 된 것이다.
• useEffect은 componentDidMount, componentDidUpdate과 비슷하다.
• 이들은 주로 API에서 데이터를 요청할 때 사용한다.

import React, { useEffect } from 'react';

useEffect(function, deps)

• function: 수행하고자 하는 작업
• deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 또는 빈 배열
  • deps 에 특정 값을 넣게 된다면 component가 처음 mount 될 때, 지정한 값이 바뀔 때, unmount될 때, 값이 바뀌기 직전에 모두 호출이 된다.
  • useEffect 안에서 사용하는 상태나 props가 있다면, useEffect의 deps에 넣어주어야 하는 것이 규칙이다.
  • 만약 사용하는 값을 넣어주지 않는다면, useEffect 안의 함수가 실행 될 때 최신 상태, props를 가리키지 않는다.
  • deps 파라미터를 생략한다면, component가 리랜더링 될 때마다 useEffect 함수가 호출된다.
  • deps에 여러 개의 값이 전달되었을 때, 그 중 하나라도 변경되면 useEffect가 실행된다.
  • 의존성 배열 내에 useEffect 함수가 의존하는 모든 외부 값을 추가한다.