📚 Reference

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

📜 Chapter

‣

useRef

useCallback

useLayoutEffect

Reconciliation

‣

React Navigation

‣

useEffect

• useEffect
• useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook이다.

useEffect(setup, dependencies?)

• useEffect는 React 컴포넌트의 생명주기(lifecycle)와 관련된 훅이다.
• 컴포넌트가 렌더링된 이후에 특정 작업을 실행하도록 도와주며, 주로 데이터 가져오기, 구독 설정, DOM 직접 조작 등 “사이드 이팩트(side effect)”를 처리할 때 사용한다.
• 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)