hyun
  • 홈
  • 글쓰기
  • 태그
  • 방명록
  • 메뉴 닫기
  • 글작성
  • 방명록
  • 환경설정
    • 분류 전체보기 (103)
      • 1. Computer Science (11)
      • 2. FrontEnd (51)
        • Javascript (10)
        • TypeScript (6)
        • CSS (3)
        • React (17)
        • Next.js (1)
        • Dart (1)
        • Three.js (3)
        • State Management (4)
        • TDD (2)
        • Ag-Grid (1)
        • LeetCode (1)
      • 3. Backend (9)
        • NestJS (9)
      • 4. Git (4)
      • 5. Blockchain (9)
        • Mastering Ethereum (5)
      • 6. Error (16)
      • 7. Infra | Cloud (2)
        • Docker (2)
        • Kubernetes (0)
        • AWS (0)
      • 8. 자격증 (0)
        • CompTIA A+ (220-1101, 220-1102.. (0)
      • Daily (1)
        • 후기 (1)
        • 맛집 (0)
  • 홈
  • 태그
  • 방명록
2. FrontEnd/React

[ React ] useEffect와 useLayoutEffect의 차이점

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용됩니다. 하지만 실행되는 타이밍과 용도가 다릅니다먼저, useEffect는 렌더링이 완료되는 시점에 비동기적으로 실행됩니다즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되는 방식그래서 useEffect는 보통 데이터를 가져오는 작업이나 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적인 영향을 주지 않는 작업에 주로 사용됩니다.반면에 useLayoutEffect는 렌더링 후 DOM이 업데이트되기 직전의 시점에 동기적으로 실행됩니다. 여기서 동기적이라는 것은 화면에 내용이 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 의미입니다. 예를 들어, DOM의 크기를 측정하거나 위치를 조정해..

2025. 1. 16. 23:31
  • «
  • 1
  • »

공지사항

  • 이메일 = fltxld1@gmail.com / GitHub = https⋯

전체 카테고리

  • 분류 전체보기 103
    • 1. Computer Science 11
    • 2. FrontEnd 51
      • Javascript 10
      • TypeScript 6
      • CSS 3
      • React 17
      • Next.js 1
      • Dart 1
      • Three.js 3
      • State Management 4
      • TDD 2
      • Ag-Grid 1
      • LeetCode 1
    • 3. Backend 9
      • NestJS 9
    • 4. Git 4
    • 5. Blockchain 9
      • Mastering Ethereum 5
    • 6. Error 16
    • 7. Infra | Cloud 2
      • Docker 2
      • Kubernetes 0
      • AWS 0
    • 8. 자격증 0
      • CompTIA A+ (220-1101, 220-1102.. 0
    • Daily 1
      • 후기 1
      • 맛집 0
애드센스 광고 영역
  • 최근 글
  • 최근 댓글

최근 글

최근댓글

태그

  • #typescript
  • #레포팅솔루션
  • #TDD
  • #js
  • #pdf다운로드 기능
  • #CSS
  • #코드팩토리
  • #test
  • #react
  • #Nestjs
  • #LocalStorage
  • #javascript
  • #cookie
  • #Next12
  • #activereportsjs
  • #이더리움
  • #i18n
  • #다국어처리
  • #AppModule
  • #getdocument
  • #Docker
  • #폴더구조
  • #반응형
  • #14버전
  • #AppRoutes
  • #next
  • #Next14
  • #sessionStorage
  • #useEffect
  • #gridoptions
MORE

전체 방문자

오늘
어제
전체

블로그 인기글

Powered by Privatenote Copyright © hyun All rights reserved. TistoryWhaleSkin3.4

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.