diff --git a/content/authors.yml b/content/authors.yml index b5e14fb25..af35c620a 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -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 @@ -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/ diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 19483fa79..03172bc00 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -32,7 +32,7 @@ React has always provided a JavaScript-centric API to the DOM. Since React compo
``` -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 // ... diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md new file mode 100644 index 000000000..00eff4743 --- /dev/null +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -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. diff --git a/content/community/conferences.md b/content/community/conferences.md index a5889d900..22beffe00 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -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 @@ -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 diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index c7be25aa4..99b531f79 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -15,7 +15,7 @@ var ShallowRenderer = require('react-test-renderer/shallow'); // npm에서 ES5 ## 개요 {#overview} -React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메소드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다. +React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메서드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다. 예를 들어 다음 컴포넌트가 있는 경우 diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 0b19e95c3..9f77edf6c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -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) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 9209afca3..fc2a306df 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -169,7 +169,7 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. +앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 해치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. 이를 시작하기 좋은 장소는 라우트입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. diff --git a/content/docs/concurrent-mode-adoption.md b/content/docs/concurrent-mode-adoption.md index 45cea0434..bbeeffbcf 100644 --- a/content/docs/concurrent-mode-adoption.md +++ b/content/docs/concurrent-mode-adoption.md @@ -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이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다.
diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md index 6a2a477ce..40dfd99fc 100644 --- a/content/docs/concurrent-mode-intro.md +++ b/content/docs/concurrent-mode-intro.md @@ -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이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. @@ -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표시를 무시할 수 있음을 의미합니다. diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index b510eb4c2..18784cc2b 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -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이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 1d13f2bf9..fcf27536f 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -16,9 +16,11 @@ prev: concurrent-mode-adoption.html >주의 > ->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다.** 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > ->이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. **React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다.** 그 기능들을 바로 배울 필요는 없습니다. +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. +> +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index b7f54a588..13c2396a0 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -17,9 +17,11 @@ next: concurrent-mode-patterns.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이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index ce06f6210..324f65363 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -51,7 +51,7 @@ class Foo extends Component { } ``` -#### render 메소드 안에서 바인딩하기 {#bind-in-render} +#### render 메서드 안에서 바인딩하기 {#bind-in-render} ```jsx class Foo extends Component { @@ -66,9 +66,9 @@ class Foo extends Component { >**주의** > ->`Function.prototype.bind`를 render 메소드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있습니다. +>`Function.prototype.bind`를 render 메서드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있습니다. -#### render 메소드 안에서 화살표 함수 사용 {#arrow-function-in-render} +#### render 메서드 안에서 화살표 함수 사용 {#arrow-function-in-render} ```jsx class Foo extends Component { @@ -83,9 +83,9 @@ class Foo extends Component { >**주의** > -> render 메소드 안에서 화살표 함수를 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 만들기 때문에 엄격한 비교에 의해 최적화가 깨질 수 있습니다. +> render 메서드 안에서 화살표 함수를 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 만들기 때문에 엄격한 비교에 의해 최적화가 깨질 수 있습니다. -### render 메소드 안에서 화살표 함수를 사용해도 괜찮을까요? {#is-it-ok-to-use-arrow-functions-in-render-methods} +### render 메서드 안에서 화살표 함수를 사용해도 괜찮을까요? {#is-it-ok-to-use-arrow-functions-in-render-methods} 이 방법은 대체로 사용해도 괜찮고, 콜백 함수로 매개변수를 전달해 주는 가장 쉬운 방법입니다. @@ -104,9 +104,9 @@ var method = obj.method; method(); ``` -바인딩 메소드는 두 번째 코드 조각이 첫 번째 코드조각과 같은 방식으로 작동하도록 만들어 줍니다. +바인딩 메서드는 두 번째 코드 조각이 첫 번째 코드조각과 같은 방식으로 작동하도록 만들어 줍니다. -일반적으로 React에서 다른 컴포넌트에 메소드를 **전달**해 줄 때만 바인딩해 주면 됩니다. 예를 들어 ` ``` -또 다른 차이점으로, React에서는 `false`를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 `preventDefault`를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성합니다. +또 다른 차이점으로, React에서는 `false`를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 `preventDefault`를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. ```html - - Click me - + + + ``` React에서는 다음과 같이 작성할 수 있습니다. -```js{2-5,8} -function ActionLink() { - function handleClick(e) { +```js{3} +function Form() { + function handleSubmit(e) { e.preventDefault(); - console.log('The link was clicked.'); + console.log('You clicked submit.'); } return ( - - Click me - +
+ +
); } ``` @@ -71,8 +71,8 @@ class Toggle extends React.Component { } handleClick() { - this.setState(state => ({ - isToggleOn: !state.isToggleOn + this.setState(prevState => ({ + isToggleOn: !prevState.isToggleOn })); } diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 625188c8e..ab20df797 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -46,5 +46,3 @@ React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 ## 시작해봅시다! {#lets-get-started} 아래로 계속 스크롤하면, 푸터 바로 앞에서 [다음 장](/docs/introducing-jsx.html)으로 연결된 링크를 찾을 수 있습니다. - - diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 03b1669ff..c8ab19a9c 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -295,7 +295,7 @@ const EnhancedComponent = enhance(WrappedComponent) ## 컨벤션: 간단한 디버깅을 위한 디스플레이 네임 작성 방법 {#convention-wrap-the-display-name-for-easy-debugging} -다른 구성 요소와 마찬가지로 HOC로 만든 컨테이너 구성 요소도 [React Developer Tools](https://github.com/facebook/react-devtools)에 표시됩니다. 디버깅을 쉽게 하려면 HOC의 결과임을 알리는 디스플레이 네임을 작성합니다. +다른 구성 요소와 마찬가지로 HOC로 만든 컨테이너 구성 요소도 [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools)에 표시됩니다. 디버깅을 쉽게 하려면 HOC의 결과임을 알리는 디스플레이 네임을 작성합니다. 가장 일반적인 방법은 HOC의 이름으로 내부 컴포넌트명을 감싸는 것입니다. 따라서 HOC의 이름이 `withSubscription`이고, HOC 내부의 컴포넌트의 이름이 `CommentList` 인 경우, 디스플레이 네임은 `WithSubscription(CommentList)`을 사용합니다. @@ -341,7 +341,7 @@ render() { ### 정적 메서드는 반드시 따로 복사하세요 {#static-methods-must-be-copied-over} -리액트 컴포넌트에 정적 메소드를 정의하는 것이 유용할 때도 있습니다. 예를 들어 Relay 컨테이너는 GraphQL 구성을 용이하게 하기 위해 정적 메서드 `getFragment`를 노출합니다. +리액트 컴포넌트에 정적 메서드를 정의하는 것이 유용할 때도 있습니다. 예를 들어 Relay 컨테이너는 GraphQL 구성을 용이하게 하기 위해 정적 메서드 `getFragment`를 노출합니다. 컴포넌트에 HOC를 적용하면, 기존 컴포넌트는 컨테이너의 컴포넌트로 감싸집니다. 즉, 새 컴포넌트는 기존 컴포넌트의 정적 메서드를 가지고 있지 않습니다. diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 630ecd3aa..97374858f 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -20,7 +20,7 @@ JSX는 React "엘리먼트(element)" 를 생성합니다. [다음 섹션](/docs/ ### JSX란? {#why-jsx} -React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. +React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 *기술*을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 [*관심사*를 분리](https://en.wikipedia.org/wiki/Separation_of_concerns)합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 [이 이야기](https://www.youtube.com/watch?v=x7cQ3mrcKaY)가 확신을 줄 것입니다. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index c813690a0..0ce136777 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -133,19 +133,6 @@ title: 테스팅 방안 - id: testing-environments title: 테스팅 환경 -- title: Concurrent 모드 (실험 단계) - isOrdered: true - items: - - id: concurrent-mode-intro - title: Concurrent 모드 소개 - - id: concurrent-mode-suspense - title: 데이터를 가져오기 위한 Suspense - - id: concurrent-mode-patterns - title: Concurrent UI 패턴 - - id: concurrent-mode-adoption - title: Concurrent 모드 도입하기 - - id: concurrent-mode-reference - title: Concurrent 모드 API 참고서 - title: 기여 items: - id: how-to-contribute diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index a5d97616e..ccadd7c13 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -393,7 +393,9 @@ it("changes value when clicked", () => { render(, container); }); - // 버튼 엘리먼트에 클릭 이벤트를 트리거 하세요. + // 버튼 엘리먼트를 가져와서 클릭 이벤트를 트리거 하세요. + + const button = document.querySelector("[data-testid=toggle]"); expect(button.innerHTML).toBe("Turn on"); diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 358343e0b..97bcfb410 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -88,7 +88,7 @@ MyComponent.propTypes = { fontSize: PropTypes.number }), - // An object with warnings on extra properties + // 추가 프로퍼티에 대한 경고가 있는 객체 optionalObjectWithStrictShape: PropTypes.exact({ name: PropTypes.string, quantity: PropTypes.number diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 771857046..e952d9058 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -8,7 +8,7 @@ redirect_from: React와 [웹 컴포넌트](https://developer.mozilla.org/ko/docs/Web/Web_Components)는 서로 다른 문제를 해결하기 위해 만들어졌습니다. 웹 컴포넌트는 재사용할 수 있는 컴포넌트에 강한 캡슐화를 제공하는 반면, React는 데이터와 DOM을 동기화하는 선언적 라이브러리를 제공합니다. -두 목표는 상호보완적입니다. React에서 웹 컴포넌트를 사용할지, 웹 컴포넌트를 React에서 사용할지, 둘 다 사용할지는 자유롭게 정하실 수 있습니다. +두 목표는 상호보완적입니다. React에서 웹 컴포넌트를 사용할지, 웹 컴포넌트에서 React를 사용할지, 둘 다 사용할지는 자유롭게 정하실 수 있습니다. ## React에서 웹 컴포넌트 사용하기 {#using-web-components-in-react} diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index a0891ad85..44abb319c 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -97,7 +97,7 @@ const MarkdownPage = ({
{date}{' '} {hasAuthors && ( - + by{' '} {toCommaSeparatedList(authors, author => (