Weekly TIL - Day 21

⭐️ Today's summary

프로젝트 5일차과정에서 4일차에 진행한 검색 부분에 헷갈리는게 있어 정리해 볼려고 한다.

 

⭐️ Problem

[ MovieListPage.jsx 검색 로직 ]

// 입력값 없으면 초기화
if (!trimmed) {
  setIsSearchMode(false); // 검색 모드 해제
  setSearchKeyword(''); // 검색 키워드 초기화
  setCurrentPage(1); // 첫 페이지로
  return;
}

// 검색어 있으면 검색 모드로 전환
setIsSearchMode(true);
setSearchKeyword(trimmed);
setCurrentPage(1); // 검색 시 무조건 첫 페이지
setSearchInput(''); // 검색창 비우기

 

어제의 코드에서 위와같이 set이 여러번 발생하는데, 이때 리렌더링이 매번 되는지 궁금해서 정리해 보았다.

 

⭐️ Try

 

React는 동일한 이벤트 핸들러 안에서 여러 setState가 호출되면 자동으로 batch 처리해서

최종 값만 기준으로 한 번만 렌더링 & useEffect 실행한다는 결과를 알았다.

batch란 업데이트를 묶어서 한번에 처리하는 것을 뜻함

즉, 아래처럼 한 함수 내에서 상태 여러 개 바꿔도

setIsSearchMode(true);
setSearchKeyword(‘검색어’);
setCurrentPage(1);

결과적으로 useEffect()는 최종 상태 기준으로 한 번만 실행된다.

getMovies(currentPage)도 딱 한 번 호출됨. -> useEffect()안에있는 함수

 

정리하자면

 

useEffect는 3개의 의존성이 있는데 1개가 바뀌던 2개가바뀌던 3개가 바뀌던 "의존성이 바뀌었다" 라고 감지를 한다.

 

근데 React가 내부적으로 "얘네 다 한 이벤트 흐름에서 나왔네?" 라고 인지를 하고 batch처리를 하게 된다.

 

그래서 리렌더링도 1번만 되게 된다.

 

그러면 다시 useEffect를 1번 실행시키고 getMovies()도 한번만 실행시킨다.

 

batch 처리를 통해서 이벤트를 한번에 묶어서 처리하는다는것을 알게 되었다.