Skip to content

Commit

Permalink
Merge branch 'master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
taehwanno authored Jun 26, 2021
2 parents 3c447fb + 86dee34 commit eee9c30
Show file tree
Hide file tree
Showing 26 changed files with 198 additions and 128 deletions.
9 changes: 9 additions & 0 deletions content/authors.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# Map of short name to more information. `name` will be used but if you don't
# want to use your real name, just use whatever. If url is included, your name
# will be a link to the provided url.
abernathyca:
name: Christine Abernathy
url: https://twitter.com/abernathyca
acdlite:
name: Andrew Clark
url: https://twitter.com/acdlite
Expand Down Expand Up @@ -70,12 +73,18 @@ petehunt:
rachelnabors:
name: Rachel Nabors
url: https://twitter.com/rachelnabors
rickhanlonii:
name: Rick Hanlon
url: https://twitter.com/rickhanlonii
schrockn:
name: Nick Schrock
url: https://twitter.com/schrockn
sebmarkbage:
name: Sebastian Markbåge
url: https://twitter.com/sebmarkbage
sethwebster:
name: Seth Webster
url: https://twitter.com/sethwebster
sophiebits:
name: Sophie Alpert
url: https://sophiebits.com/
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2017-09-08-dom-attributes-in-react-16.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ React has always provided a JavaScript-centric API to the DOM. Since React compo
<div tabIndex={-1} />
```

This has not changed. However, the way we enforced it in the past forced us to maintain a allowlist of all valid React DOM attributes in the bundle:
This has not changed. However, the way we enforced it in the past forced us to maintain an allowlist of all valid React DOM attributes in the bundle:

```js
// ...
Expand Down
59 changes: 59 additions & 0 deletions content/blog/2021-06-08-the-plan-for-react-18.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: "The Plan for React 18"
author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster]
---

The React team is excited to share a few updates:

1. We’ve started work on the React 18 release, which will be our next major version.
2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18.
3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback.

These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious!

## What’s coming in React 18

When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`.

These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.

If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.**

## A gradual adoption strategy

Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.

We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group.

## Working with the community

We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future!

**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.

For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4).

## Accessing the React 18 Working Group

Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18).

Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.

As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues).

## How to try React 18 Alpha today

New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday.

There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**.

## Projected React 18 release timeline

We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.

* Library Alpha: Available today
* Public Beta: At least several months
* Release Candidate (RC): At least several weeks after Beta
* General Availability: At least several weeks after RC

More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release.
38 changes: 24 additions & 14 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,20 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {#upcoming-conferences}

### React fwdays’21 {#react-fwdays-2021}
March 27, 2021 - remote event

[Website](https://fwdays.com/en/event/react-fwdays-2021) - [Twitter](https://twitter.com/fwdays) - [Facebook](https://www.facebook.com/events/1133828147054286) - [LinkedIn](https://www.linkedin.com/events/reactfwdays-21onlineconference6758046347334582273) - [Meetup](https://www.meetup.com/ru-RU/Fwdays/events/275764431/)

### React Summit - Remote Edition 2021 {#react-summit-remote-2021}
April 14-16, 2021, 7am PST / 10am EST / 4pm CEST - remote event
### render(ATL) 2021 {#render-atlanta-2021}
September 13-15, 2021. Atlanta, GA, USA

[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)

### React Case Study Festival 2021 {#react-case-study-festival-2021}
April 27-28, 2021 - remote event
### React Conference Live 2021 {#react-conference-live-2021}
October 7-8, 2021. In-person in Amsterdam, Netherlands + remote (hybrid event)

[Website](https://link.geekle.us/react/offsite) - [LinkedIn](https://www.linkedin.com/events/reactcasestudyfestival6721300943411015680/) - [Facebook](https://www.facebook.com/events/255715435820203)
[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl) - [LinkedIn](https://www.linkedin.com/company/frontendlove/)

### render(ATL) 2021 {#render-atlanta-2021}
September 13-15, 2021. Atlanta, GA, USA
### React Advanced 2021 {#react-advanced-2021}
October 22-23, 2021. In-person in London, UK + remote (hybrid event)

[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)
[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)

### React India 2021 {#react-india-2021}
November 12-13, 2021 in Mumbai, India
Expand All @@ -39,6 +34,21 @@ November 12-13, 2021 in Mumbai, India

## Past Conferences {#past-conferences}

### React Case Study Festival 2021 {#react-case-study-festival-2021}
April 27-28, 2021 - remote event

[Website](https://link.geekle.us/react/offsite) - [LinkedIn](https://www.linkedin.com/events/reactcasestudyfestival6721300943411015680/) - [Facebook](https://www.facebook.com/events/255715435820203)

### React Summit - Remote Edition 2021 {#react-summit-remote-2021}
April 14-16, 2021, 7am PST / 10am EST / 4pm CEST - remote event

[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### React fwdays’21 {#react-fwdays-2021}
March 27, 2021 - remote event

[Website](https://fwdays.com/en/event/react-fwdays-2021) - [Twitter](https://twitter.com/fwdays) - [Facebook](https://www.facebook.com/events/1133828147054286) - [LinkedIn](https://www.linkedin.com/events/reactfwdays-21onlineconference6758046347334582273) - [Meetup](https://www.meetup.com/ru-RU/Fwdays/events/275764431/)

### React Next 2020 {#react-next-2020}
December 1-2, 2020 - remote event

Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-shallow-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ var ShallowRenderer = require('react-test-renderer/shallow'); // npm에서 ES5

## 개요 {#overview}

React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메소드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다.
React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메서드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다.

예를 들어 다음 컴포넌트가 있는 경우

Expand Down
4 changes: 3 additions & 1 deletion content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ var ReactTestUtils = require('react-dom/test-utils'); // npm과 ES5
>
> Facebook에서는 [React Testing Library](https://testing-library.com/react) 사용을 권장합니다. 이 라이브러리는 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계되었습니다.
>
> 대안으로는 Airbnb에서 출시한 테스팅 도구인 [Enzyme](https://airbnb.io/enzyme/)이 있습니다. Enzyme은 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있게 해줍니다.
> React v16 이하에서는 [Enzyme](https://airbnb.io/enzyme/)을 통해 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있습니다.


- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand Down
2 changes: 1 addition & 1 deletion content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ const MyComponent = () => (

## Route-based code splitting {#route-based-code-splitting}

앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다.
앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 해치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다.

이를 시작하기 좋은 장소는 라우트입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다.

Expand Down
8 changes: 3 additions & 5 deletions content/docs/concurrent-mode-adoption.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,11 @@ next: concurrent-mode-reference.html

>주의
>
>이 페이지는 **안정된 배포판에서 아직 제공되지 않는 실험적인 기능들** 대해 설명합니다. 프로덕션용 앱에선 React 실험 배포판을 사용하지 마세요. 이러한 기능들은 React의 일부가 되기 전에 아무 예고 없이 상당히 변경될 수 있습니다.
>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다.
>
>이 문서는 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. **React를 처음 쓰신다면 이 기능들에 대해 신경 쓰지 마세요.** 당장 익힐 필요는 없습니다.
>주의
>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요.
>
>아래에 있는 "blocking 모드"와 `createBlockingRoot`에 대한 모든 참조는 유효하지 않으며 무시돼야 합니다.
>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다.
</div>

Expand Down
10 changes: 6 additions & 4 deletions content/docs/concurrent-mode-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ next: concurrent-mode-suspense.html

>주의사항
>
>이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들**에 관해 설명합니다. 프로덕션용 앱에선 리액트의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 포함되기 전에 경고 없이 크게 변경될 수 있습니다.
>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다.
>
>이 문서는 얼리어답터들과 새로운 기능을 궁금해하시는 분들을 위해 작성된 문서입니다. **React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다**. 그 기능들을 바로 배울 필요는 없습니다.
>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요.
>
>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다.
</div>

Expand Down Expand Up @@ -65,11 +67,11 @@ Concurrent 모드는 "브랜치에서" 하는 React 작업과 같다고 전에

한번 앱에서 두 화면 사이를 탐색한다고 가정해보겠습니다. 경우에 따라서, 새 화면에서 사용자에게 "충분히 좋은" 로딩 state를 보여주기 위해 필요한 코드와 데이터를 불러오지 못 할 수 있습니다. 빈 화면이나 큰 스피너로 전환하는 것은 어려운 일이 될 수 있지만 일반적으로 필요한 코드와 데이터를 가져오는 데에 그렇게 많은 시간이 소요되지않습니다. **React가 기존 화면에서 조금 더 오래 유지할 수 있고 새 화면을 보여주기 전에 "안 좋은" 로딩 state를 "건너뛸 수" 있다면 더 좋지 않을까요?**

오늘날 이것이 가능하긴 하지만 조정하기는 어려울 수 있습니다. Concurrent 모드에서는 이 기능이 내장되어 있습니다. React는 먼저 메모리, 비유하자면 "다른 브랜치", 에서 새로운 화면을 준비하기 시작합니다. 그래서 React는 더 많은 콘텐츠를 불러올 수 있도록 DOM을 업데이트하기 전에 기다릴 수 있습니다. Concurrent 모드에서는 React가 인라인 표시기로 완벽하게 상호작용하는 이전 화면을 계속 표시하도록 지시할 수 있습니다.
오늘날 이것이 가능하긴 하지만 조정하기는 어려울 수 있습니다. Concurrent 모드에서는 이 기능이 내장되어 있습니다. React는 먼저 메모리, 비유하자면 "다른 브랜치", 에서 새로운 화면을 준비하기 시작합니다. 그래서 React는 더 많은 콘텐츠를 불러올 수 있도록 DOM을 업데이트하기 전에 기다릴 수 있습니다. Concurrent 모드에서는 React가 인라인 표시기로 완벽하게 상호작용하는 이전 화면을 계속 표시하도록 지시할 수 있습니다.

### 동시성 {#concurrency}

위의 두 가지 예시를 살펴보고 Concurrent 모드가 어떻게 통합되는지 살펴보겠습니다. **Concurrent 모드에서 React는 여러 작업을 *동시에*, 다른 팀원들이 각자 작업을 할 수 있는 브랜치처럼, 진행할 수 있습니다**
위의 두 가지 예시를 살펴보고 Concurrent 모드가 어떻게 통합되는지 살펴보겠습니다. **Concurrent 모드에서 React는 여러 작업을 *동시에*, 다른 팀원들이 각자 작업을 할 수 있는 브랜치처럼, 진행할 수 있습니다**

* CPU 바운드 업데이트(예를 들어 DOM 노드 만들기 및 컴포넌트 코드 실행)의 경우 Concurrency는 더욱 긴급한 업데이트가 이미 시작한 렌더링을 "중단" 할 수 있음을 의미합니다.
* IO 바운드 업데이트(예를 들어 네트워크에서 코드나 데이터를 가져오는 것)의 경우 Concurrency는 모든 데이터가 도달하기 전에 React가 메모리에서 렌더링을 시작할 수 있으며 빈 로딩 state표시를 무시할 수 있음을 의미합니다.
Expand Down
6 changes: 4 additions & 2 deletions content/docs/concurrent-mode-patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ next: concurrent-mode-adoption.html

>경고
>
> 이 페이지의 내용은 **안정된 배포판에서 [사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능**입니다. 프로덕션 애플리케이션에 실험적인 React 빌드를 의존하지 마십시오. 이 기능은 React에 편입되기 전에 경고 없이 크게 변경될 수 있습니다.
>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다.
>
> 이 문서는 얼리어답터와 호기심 넘치는 사람들을 위해 작성되었습니다. **React 초기 입문자라면 이 기능에 신경 쓰지 않아도 괜찮습니다.** -- 이 내용을 지금 당장 배울 필요는 없습니다. 데이터 패칭을 위한 튜토리얼을 찾는다면 [이 문서](https://www.robinwieruch.de/react-hooks-fetch-data/)를 보세요.
>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요.
>
>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다.
</div>

Expand Down
Loading

0 comments on commit eee9c30

Please sign in to comment.