공식문서 정리
공식 문서 링크
https://beta.reactjs.org/blog/2022/03/29/react-v18#
What is Concurrent React?
The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers.
리액트 18에서 추가된 가장 중요한 것은 우리가 사용자들이 생각하지 않아도 되었으면 좋겠다고 생각하는 것입니다: 동시성(concurrency)이죠. 우리는 이것을 어플리케이션 개발자들은 아마 대부분 생각하지 않지만, 라이브러리 개발자들에게는 조금 복잡할 것이라고 생각합니다.Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won’t see those concepts anywhere in our public APIs.
동시성은, 그 자체로는 기능이 아닙니다. 이것은 리액트가 동시에 여러 버전의 UI를 준비할 수 있도록 해주는 새로운 behind-the-scenes 메커니즘입니다. 동시성은 구현 세부사항이라고 생각하시면 됩니다 - 이것이 귀중한 이유는 이게 불러올 다른 기능들 때문입니다. 리액트는 우선순위 큐나 다중 버퍼링같은 고급 기술을 내부 구현에 사용합니다. 하지만 우리의 공개 API에서는 이런 개념들을 볼 수 없을겁니다.When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on what you want the user experience to look like, and React handles how to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood.
우리가 API를 설계할 때, 우리는 구현 세부정보를 개발자에게 숨기려고 노력합니다. 리액트 개발자로서, 당신은 사용자 경험을 어떻게 보여줄지에 집중하고 리액트가 그 경험을 어떻게 전달할지를 처리합니다. 그래서 우리는 리액트 개발자들이 내부적으로 동시성이 어떻게 작동하는지 아는것을 기대하지 않습니다.However, Concurrent React is more important than a typical implementation detail — it’s a foundational update to React’s core rendering model. So while it’s not super important to know how concurrency works, it may be worth knowing what it is at a high level.
그러나, Concurrent React는 전형적인 구현 세부 사항보다는 중요합니다. - 이것은 리액트의 코어 렌더링 모델의 근본적인 업데이트 입니다. 그래서 동시성이 어떻게 작동하는지가 크게 중요하지는 않지만, 하이레벨에서 동시성이 무엇인지 알만한 가치가 있을 수도 있습니다.A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen.
Concurrent React의 중요한 특징중 하나는 렌더링이 중단 가능하다는 것입니다. 처음 리액트 18로 업그레이드 하면, 동시성 관련 기능들을 추가하지 않으면, 렌더링은 이전 버전의 리액트와 동일하게 일어납니다 - 단일한, 중단되지 않는 동기식 transaction으로요. 동기식 렌더링으로는, 업데이트가 렌더링을 시작하면, 사용자가 결과를 화면에서 볼 수 있을 때 까지 아무것도 그것을 방해할 수 없습니다.In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. 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.
concurrent render에서는 항상 그렇지는 않습니다. 리액트는 렌더링을 하기 시작하고, 중간에 멈추었다가, 나중에 이어서 진행할수 있습니다. 심지어 진행중인 렌더링을 완전히 포기할 수도 있습니다. 리액트는 렌더링이 방해되어도 UI가 일관성있게 나타나도록 보장합니다. 이것을 위해, 리액트는 전체 트리가 평가될 때 까지, DOM mutations을 수행하기를 끝까지 기다립니다. 이것은 UI가 큰 렌더링 작업 중이더라도 사용자의 입력에 즉시 응답해, 좋은 사용자 경험을 만들수 있음을 뜻합니다.Another example is reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state. For example, when a user tabs away from a screen and back, React should be able to restore the previous screen in the same state it was in before. In an upcoming minor, we’re planning to add a new component called
<Offscreen>that implements this pattern. Similarly, you’ll be able to use Offscreen to prepare new UI in the background so that it’s ready before the user reveals it.
또 다른 예시는 재사용 가능한 상태(reusable state)입니다. Concurrent React는 화면에서 UI의 일부를 제거하고, 이전의 상태를 재사용하면서 다시 추가할 수 있습니다. 예를 들면, 사용자가 다른 탭으로 이동했다가 다시 돌아올 때 React는 이전 상태와 동일한 상태로 화면을 복원할 수 있어야 합니다. 다가오는 마이너 버전에서, 우리는 이런 패턴을 구현하는 새로운<Offscreen>이라는 컴포넌트를 추가할 예정입니다. 비슷하게, 당신은 Offscreen을 사용하여 새로운 UI를 백그라운드에서 준비하여 사용자가 보기전에 준비되도록 할 수 있습니다.Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation.
Concurrent 렌더링은 리액트의 강력한 새로운 도구이며, Suspense, transitions, streaming server rendering을 포함한 우리의 새로운 기능들이 이것을 활용하도록 만들어졌습니다. 하지만 리액트 18은 이 새로운 기반 위에서 구축하려는 것들의 시작일 뿐입니다.
세줄 요약
- 기존의 리액트는 렌더링을 시작하면 중단할 수 없었다.
- Concurrent React는 렌더링을 하기 시작하고, 중간에 멈추었다가, 나중에 이어서 진행할 수 있다. 렌더링을 그냥 포기할 수도 있다.
- 이런 Concurrent 렌더링이라는 강력한 도구를 기반으로 리액트 팀은 Suspense, transitions, streaming server rendering 같은 새로운 기능들을 추가했고, 이것들은 이제 시작일 뿐이다.
이것을 이해한 상태로 읽어보면 좋은 블로그 글
https://blog.codeminer42.com/everything-you-need-to-know-about-concurrent-react-with-a-little-bit-of-suspense/
-> 번역한 글: https://velog.io/@superlipbalm/everything-you-need-to-know-about-concurrent-react
