동시성이 뭘 의미 하는가
- 아침에 잼바른 토스트와 커피를 동시에 준비하는 느낌
- 싱글 스레드 안에서 프로그램을 쪼개서 효율적으로 동작시키는 것
유저 경험을 퍼펙트하게 하기 위한 움직임이다
- 16ms안에 모든게 동작해야되는데 리액트 리컨실 과정이 효율적이다고 해도 현실적으로는 처리해야할 돔 개수가 많아지면 화면을 블록시키는 문제가 있다
- 괜찮은 개발자라면 디바운스도 걸고 메모이제이션 도 쓰고하면서 해결하려고 하겠지만 렌더링은 여전히 블록킹을 만든다
- 유저 경험 증대를 위해 단순히 성능을 고치는 것 뿐만 아니라 유저는 어떨 때 나은 경험을 얻는지 고려를 해야한다
- 스피너 스켈레톤 플레이스 홀더는 물론 뭔가 진행되게 끔 느끼게해서 사용자 경험을 증대시키기는 하지만 너무 자주 나온다면 오히려 사용자 경험을 감소시키게 한다
- 데이터가 충분히 빠르게 어플리케이션에 도달해서 완벽하게 렌더된 화면을 보여준다면 저것들을 안봐도 된다
리액트의 동시성 모드
- 리액트의 동시성도 역시나 task들을 다 쪼개서 우선순위에 맞게 동작시키려고 한다
- 리액트의 동시성
- 메인스레드를 블록하면 안된다
- 우선순위에 따라 task를 동작 시킨다
- 결과를 커밋 하지않고 부분적으로 트리만 렌더한다
- Concurrent모드를 쓰면 마치 git을 쓰듯이 task들이 여러 브랜치로 쪼개져서 진행이 된다
- Concurrent 모드는 렌더링을 인터럽트 가능하도록 만듦으로써 근본적인 문제를 수정
- 사용자가 입력을 할때 리액트는 브라우저의 텍스트 입력을 블로킹 하지않는다
- 리액트는 브라우저가 사용자 입력을 paint하고 렌더링을 계속 할수 있도록하고 그게 다 끝나면 리액트 DOM을 업데이트
- Concurrent모드를 쓰면 Git 을 쓸때 브랜치 사이에 전환이 자유로운 것 처럼 task 전환을 한다
- Concurrent모드 내에서 더 중요한 일들을 위해서 업데이트 중단하고 이전 작업으로 돌아갈 수 있다
- Concurrent모드 기술은 UI에서 디바운싱과 스로틀링의 필요성을 줄입니다
Concurrent모드 소개 (실험 단계) - React
What is React Concurrent Mode?