• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

훅 기초 익히기 - 배치 처리와 순차적 처리의 차이

22.12.20 17:58 작성 조회수 214

0

강사님 안녕하세요 :) 좋은 강의 잘 듣고 있습니다!
리액트 훅 - 배치, 순차적 처리 관련하여 제가 이해한 것이 맞는지 여쭤보고 싶어서 질문 드립니다!

1. 배치처리 (React 요소에서 관리되는 훅에서 기본적으로 처리하는 방식이며, 같은 시간에 훅 전체가 (예 YYYY-MM-DD HH:MM에 동시간에) 처리됨

2. 순차처리
방법 1) unstable_batched_updates() 함수와, 직전 상태값을 받는 매개 변수를 받는 함수를 사용
방법 2) 리액트 요소가 아닌 외부에서 훅을 사용

와 같이 이해했습니다만, 제가 개념 이해를 잘 한 것이 맞을까요?
그리고 배치와 순차 처리 개념은 어떤 경우에 쓰이는 것인지, 혹시 예를 들어서 설명해주실 수 있을까요?
(배치란 실제로 한번에 내부적으로 쓰이는 data를 fetching 할때이고, 순차처리는 무언가 연쇄적으로 업데이트가 일어날때일까요?)

답변 1

답변을 작성해보세요.

0

이정연님 안녕하세요
배치는 여러 상태값 업데이트를 모아서 한 번에 업데이트 후에 한 번만 렌더링을 합니다.
배치가 안되는 상황(순차)에서는 상태값 업데이트 회수 만큼 렌더링이 발생합니다
(그 만큼 비효율적입니다)

리액트 18 이전까지는 이러한 부분을 개발자가 신경써야 했는데요
리액트 18부터는 리액트가 거의 모든 경우에 자동으로 배치로 처리해줍니다
따라서 리액트 18 이상을 사용하신다면 이제 배치에 대해 신경을 안쓰셔도 괜찮습니다

이정연님의 프로필

이정연

질문자

2022.12.24

네 감사합니다~! 강의 내용대로,
동기로 처리하면 상태값 변경함수가 재실행되고 재실행 횟수만큼 렌더링이 될 테니,
성능이슈가 생길 수 있겠습니다.
배치 처리 하는 이유는, 효율적으로 렌더링 하기 위해, 비동기로 상태값을 변경시키고 렌더링을 한번만 수행하는 목적이었군요!
리액트 18은 이 부분을 자동으로 처리해 주는 것이구요 :)
제가 개념 파악이 아직 덜 되어서, 질문을 중구난방으로 드린 것 같습니다ㅠㅠ
감사합니다!