반응형
카엔입니다
카엔
카엔입니다
전체 방문자
오늘
어제
  • 분류 전체보기 (98)
    • 프론트엔드 (74)
      • JavaScript (22)
      • CSS (2)
      • React (21)
      • Next.js (12)
      • 블록체인 (2)
    • 에러 모음 (11)
    • Git (5)
    • 백엔드 (1)
      • GraphQL (1)
    • AWS (2)
    • CS (1)
    • 코딩테스트 (1)
    • 개발 이야기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • error
  • ec2
  • git
  • useMemo
  • 자바스크립트 이진수 변환
  • 구글 스프레드시트 API
  • 웹상동작과정
  • 모바일 파란 박스
  • nextron ipc
  • 자릿수 채우기
  • 이벤트루프
  • git 덮어쓰기
  • ChatGPT
  • nextron
  • useCallback
  • unoptimized error
  • Next.js
  • DOUBLE CHECK CONFIGURATION Please double check that you have setup a PAID OpenAI API Account. You can read more here: https://docs.agpt.co/setup/#getting-an-api-key
  • ipc 통신
  • Cloudfront

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
카엔입니다

카엔

프론트엔드/React

리액트 Batching

2022. 11. 3. 12:25

Batching이란?

React에서 렌더링 관련된 아주 중요한 개념입니다

최적화에 크게 기여를 하고 있는 기능이며 18버전에서 Batching이 더욱 강화되었습다

리액트에서의 상태는 렌더링이 발생시킵니다

즉 1 상태 === 1 렌더링입니다

이런식으로 모든 상태 업데이트마다 렌더링을 발생시키면 리액트는 수많은 리렌더 때문에 멈춰버릴 겁니다

이때 사용되는 것이 배칭입니다

Batching이란 16ms 이내에서 발생한 모든 상태 업데이트를 하나의 리렌더링으로 묶어줍니다

이렇게 하나의 리렌더링만 발생함으로써 불필요한 렌더링을 방지하고 성능을 최적화 시키게 되는 리액트의 핵심 개념입니다

Batching은 언제 발생할까?

React Event 단위로 배칭이 발생하게됩니다

즉 2개의 함수에 상태 업데이트가 따로 일어나게 된다면 이벤트는 두번 발생하게됩니다 그 결과 배칭 또한 두번 일어납니다

'프론트엔드 > React' 카테고리의 다른 글

React Query 공식문서 정리  (0) 2022.12.28
chatGPT를 사용한 리액트 최적화 [ memo, useMemo, useCallback ]에 대한 내용  (0) 2022.12.22
리액트 재렌더링 조건  (0) 2022.11.01
리액트 useState란?  (0) 2022.11.01
react lightweight chart 트레이딩뷰 마우스 이탈 이벤트  (0) 2022.10.23
    '프론트엔드/React' 카테고리의 다른 글
    • React Query 공식문서 정리
    • chatGPT를 사용한 리액트 최적화 [ memo, useMemo, useCallback ]에 대한 내용
    • 리액트 재렌더링 조건
    • 리액트 useState란?
    카엔입니다
    카엔입니다
    https://www.kaen.site/

    티스토리툴바