Concurrent Rendering (1)

이동규 (Justin)·2023년 4월 29일
0

리액트 알아가기

목록 보기
2/4
post-thumbnail

리액트 공식 홈페이지의 'blog' 탭을 보면 리액트 18 업데이트와 관련된 글 이 있다.
2022년 3월에 업데이트 된 글인데, 나는 무려 1년 뒤 읽고야 말았군..^^;

이 글에서는 리액트 18에 추가된 Suspense, transition 등의 기능은 다 Concurrency(동시성)라는 개념을 리액트의 렌더링에 적용시키는 일이라고 말한다. 그것이 Concurrent rendering이다.

왜 렌더링에 동시성 개념을 적용시키기로 리액트 팀은 마음먹었을까?

This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

모두 더 나은 사용자 경험을 위함이란다.

그간, 리액트에서 렌더링이란 한번에 하나만 일어날 수 있는 일이었다. 그렇게 된다면 굉장히 많이 뭔가를 그려야 하는 상황에서는 화면이 멈추는, 다시말하면 앱이 유저의 인풋에 반응하지 못하는 상황이 발생할 수 있다.

그러나 Concurrency, 동시성 개념을 적용시켜 하나의 렌더링이 일어나는 동안 다른 화면을 (미리) 그려놓을 수 있다면?

유저와의 상호작용을 위한 렌더링과 시간이 오래걸리는 비싼 렌더링을 한꺼번에 처리해서 더 나은 UX를 제공할 수 있게 되는 것이다.

그런데..

지금 이렇게 길게 설명해야 하듯이 이 동시성 개념은 그간 리액트에서는 보편적으로 활용되지 않던 것이었고 따라서 굉장히 대박 업데이트(?)에 속한다. 그래서 리액트 팀도 이것을 점진적으로 적용시키려고 한다는 말씀이 포함되어 있다.

자, 이것을 어떤 API들을 통해 적용시켜 볼 수 있는지는 다음 시간에 계속.

보너스

동시성과 병렬성의 차이를 알아보고 싶다면..

Concurreny vs Parallelism

profile
Frontend Developer, JamStack, Ethereum

0개의 댓글