useEffect2 [7주차 위클리페이퍼] 리액트 생명주기 컴포넌트의 라이프사이클 단계 리액트 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정을 관리하는 단계를 말한다. 과거 리액트가 함수형 컴포넌트가 아닌 클래스형 컴포넌트를 사용할 때에는 대표적인 생명주기 메서드가 세 가지가 있었다. 컴포넌트가 생성되고 DOM에 추가될 때 호출되는 단계인 Mount에서는 componentDidMount() 메서드 컴포넌트 상태나 props가 변경될 때 호출되는 단계인 Update에서는 componentDidUpdate() 메서드 컴포넌트가 DOM에서 제거될 때 호출되는 단계인 Unmount에서는 componentWillUnmount() 메서드 이 메서드들에 대해서는 아래 포스트에서 간략히 설명해 놓았다.2023.05.26 - [React] - useCallback.. 2024. 8. 16. useEffect와 useLayoutEffect useEffect와 useLayoutEffect useEffect는 데이터 가져오기, 구독 설정, 이벤트리스너 등록 등 브라우저 페인팅 후에 실행해도 되는 작업에 적합한 훅이며, 렌더링 결과가 브라우저에 그려진 후 비동기적으로 실행된다. 비동기적으로 실행되기 때문에 렌더링 성능에 영향을 덜 미친다.import React, { useEffect } from "react";const exampleFunction = () => { useEffect(() => { console.log("컴포넌트 렌더링 후 실행"); // api 호출, 이벤트리스너 등록 등의 작업 return () => { console.log("컴포넌트 언마운트되거나 업데이트되기 전 실행"); .. 2024. 6. 15. 이전 1 다음
