Skip to content

Latest commit

 

History

History
61 lines (37 loc) · 5.04 KB

StrictMode와 Concurrent Rendering.md

File metadata and controls

61 lines (37 loc) · 5.04 KB

StrictMode와 Concurrent Rendering

리액트의 Strict Mode는 다음과 같은 문제들을 검사한다.

  • 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
    • componentWillMount, componentWillReceiveProps와 같은 deprecated된 메서드를 사용할 경우 경고메시지
    • 서드파티 라이브러리를 사용할 때 이러한 메서드가 사용되지 않는다고 장담할 수 없기 때문에
  • 권장되지 않는 findDOMNode 사용에 대한 경고
  • 예상치 못한 부작용 검사

왜 Strict Mode에서 useEffect가 두번 실행될까?

두 번 실행해서 같은 결과가 나오는지 확인하는 것이다. 함수 컴포넌트는 같은 props를 받으면 언제나 같은 결과를 반환하는 순수 함수이어야한다.

Strict Mode에 의해 문제가 없다면 React18에서의 동시성 모드의 이점을 얻을 수 있다.

Concurrent Rendering에서는 컴포넌트가 여러 번 중단되고 다시 렌더링될 수 있다. 즉, StrictMode에서 컴포넌트가 여러 번 실행되었을 때 안정적으로 동작하는지 확인하는 것이다.

리액트의 동시성모드는 작업을 작은 단위로 쪼개고 우선순위에 따라 번갈아 수행한다. 작업 중 중요한 작업이 들어오면 중단과 재실행이 잦다는 얘기다. 그렇기에 여러번 작동해도 같은 결과가 나오는 것이 보장되어야 하는 것이다.

Concurrent Rendering

리액트에서 동시성이란 한번에 둘이상의 작업이 동시에 진행되는 것을 의미한다. 리액트 18에서 도입되어 렌더링 엔진 성능을 개선하고 사용자 경험을 향상시켰다.

  • 작업 중단과 재개: 컴포넌트 렌더링 중 브라우저의 다른 작업(예: 사용자 입력)에 방해받지 않도록, 렌더링 작업을 일시 중단했다가 나중에 재개할 수 있다.
  • 느린 업데이트 최적화: 느리게 렌더링되는 작업을 우선순위가 낮은 작업으로 처리하여, 사용자 경험을 개선할 수 있다.
  • 백그라운드에서의 작업 처리: 화면에 즉시 보여주지 않아도 되는 작업은 백그라운드에서 처리할 수 있다.

싱글스레드인 리액트에서 동시성은 여러작업을 작은 단위로 나눈 뒤 그 작업들 간에 우선순위를 정하고 그에 따라 번갈아 수행한다. 작업간의 전환이 매우 빨라 동시에 여러작업이 수행되는 것처럼 보이게 한다.

18버전 이전의 렌더링은 개입할 수 없는 하나의 동기적인 처리였다. 그래서 한번 렌더링이 시작되면 중단,재개, 폐기가 불가능 했다. 동시성이 지원되지 않는 경우에 렌더링이 오래걸린다면 다음에 수행해야 하는 작업이 블로킹되어 애플리케이션이 버벅일 수 있다. 이때 디바운싱과 쓰로틀링을 사용하여 최적화하지만 여기에도 문제가 있다.

  • 디바운싱: 사용자 마지막 입력이 끝나고 일정이 지나서 작업을 수행하기에 아무리 성능이 좋은 컴퓨터를 사용하더라도 무조건 일정시간을 기다려야한다.

  • 쓰로틀링: 디바운스에서 사용자 입력중 무거운 처리가 이뤄지지 않는 단점을 해결한다. 입력중 주기적으로 무거운 작업을 수행하기 떄문에. 하지만 이또한 쓰로틀 주기를 짧게 가져갈수록 성능이 나쁜 기기에서 버벅거리는 문제를 야기한다.

동시성은 일정시간 대기하지 않고 동시에 작업을 수행할 수 있기때문에 디바운싱과 쓰로틀링의 단점을 해결할 수 있다.

인풋에 입력한 값을 기반하는 검색을 하는 경우

만약 디바운싱을 적용한다면 특정 시간이후에 입력값을 바꿔 연속적인 입력을 모두 검색하는 것을 막는다. 하지만 무조건 일정 시간을 기다려야한다. 이때 트랜지션을 사용하여 우선순위를 조정하는 방식으로 해결이 가능하다.

리액트에서 Concurrent Mode 적용하는법

Concurrent Mode로 설정하기 위해서는 기존의 render 대신 createRoot를 사용하면 된다. Concurrent Mode로 설정하면 개선된 기능(Automatic Batching 등)들과 동시처리를 위한 startTransition, useTransition, useDeferredValue 훅들을 사용할 수 있다.

만약 탭을 변경하고 비동기 요청에 따라 화면이 달라지는 경우, 기존의 스피너 로딩방식은 오히려 화면이 깜빡이는 듯한 느낌을 준다. 이때 useTransition을 사용하면 해당 상태 업데이트로 인해 새롭게 발생하는 비동기 처리가 끝날때까지 화면 렌더링 변화를 지연시킨다. (원래 UI를 보여주다가 업데이트 된 ui를 보여줌)

  1. startTransition 이라는 함수에 상태 업데이트 로직 부여
  2. 해당 상태 업데이트로 발생하는 비동기 처리가 끝날때까지 화면 렌더링 지연

Reference

Back