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 May 10, 2021
2 parents 35039d0 + f0d973c commit 3c447fb
Show file tree
Hide file tree
Showing 25 changed files with 92 additions and 116 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
1. `git push my-fork-name the-name-of-my-branch`
1. [reactjs.org repo](https://github.com/reactjs/reactjs.org)에서 최근에 푸시된 브랜치를 볼 수 있습니다.
1. Github 지침을 따라주세요.
1. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. PR을 만들고 다른사람들이 수정사항을 볼 수 있게되면, Netlify가 자동적으로 빌드할 것입니다.
1. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. PR을 만들고 다른사람들이 수정사항을 볼 수 있게되면, [Netlify](https://www.netlify.com/) 자동적으로 빌드할 것입니다.

## 번역

Expand Down
2 changes: 1 addition & 1 deletion content/blog/2020-10-20-react-v17.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ React 17 supports the [new JSX transform](/blog/2020/09/22/introducing-the-new-j

## React Native {#react-native}

React Native has a separate release schedule. We currently expect the support for React 17 to land in React Native 0.65, but the exact version is subject to change. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
React Native has a separate release schedule. We landed the support for React 17 in React Native 0.64. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).

## Installation {#installation}

Expand Down
2 changes: 1 addition & 1 deletion content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ permalink: community/courses.html

- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.

- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks.
- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.

- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.

Expand Down
3 changes: 3 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)

## Chile {#chile}
* [Santiago](https://www.meetup.com/es-ES/react-santiago/)

## China {#china}
* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)

Expand Down
4 changes: 2 additions & 2 deletions content/community/videos.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ Videos dedicated to the discussion of React and the React ecosystem.
### React Conf 2019 {#react-conf-2019}

A playlist of videos from React Conf 2019.
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>

### React Conf 2018 {#react-conf-2018}

A playlist of videos from React Conf 2018.
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>

### React.js Conf 2017 {#reactjs-conf-2017}

Expand Down
4 changes: 4 additions & 0 deletions content/docs/concurrent-mode-adoption.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ next: concurrent-mode-reference.html
>
>이 문서는 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. **React를 처음 쓰신다면 이 기능들에 대해 신경 쓰지 마세요.** 당장 익힐 필요는 없습니다.
>주의
>
>아래에 있는 "blocking 모드"와 `createBlockingRoot`에 대한 모든 참조는 유효하지 않으며 무시돼야 합니다.
</div>

- [설치하기](#installation)
Expand Down
13 changes: 0 additions & 13 deletions content/docs/concurrent-mode-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ prev: concurrent-mode-adoption.html

- [Concurrent 모드 활성화](#concurrent-mode)
- [`createRoot`](#createroot)
- [`createBlockingRoot`](#createblockingroot)
- [Suspense](#suspense)
- [`Suspense`](#suspensecomponent)
- [`SuspenseList`](#suspenselist)
Expand All @@ -47,18 +46,6 @@ ReactDOM.createRoot(rootNode).render(<App />);

Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent Mode 문서](/docs/concurrent-mode-intro.html)를 참고해주세요.

### `createBlockingRoot` {#createblockingroot}

```js
ReactDOM.createBlockingRoot(rootNode).render(<App />)
```

`ReactDOM.render(<App />, rootNode)`를 대체하고 [Blocking 모드](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode)를 활성화합니다.

Concurrent 모드를 선택하면 React 작동하는 방식에 의미적 변화가 생깁니다. 이는 몇몇 컴포넌트에서 Concurrent 모드를 사용할 수 없다는 걸 의미하며 몇몇 앱은 곧바로 Concurrent 모드로 마이그레이션을 할 수 없습니다.

Blocking 모드는 Concurrent 모드의 일부만 포함하며 곧바로 마이그레이션 할 수 없는 앱의 중간 마이그레이션 단계로 사용됩니다.

## Suspense API {#suspense}

### `Suspense` {#suspensecomponent}
Expand Down
2 changes: 1 addition & 1 deletion content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ next: cdn-links.html

## 툴체인이 필요하지 않을 수 있습니다. {#you-might-not-need-a-toolchain}

위에서 설명한 문제를 경험하지 못했거나 아직 Javascript 도구를 사용하는 것이 편하지 않다면, [React를 HTML 페이지에서 일반적인 `<script>` 태그에 추가](/docs/add-react-to-a-website.html)하거나 [JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)를 고려하세요.
위에서 설명한 문제를 경험하지 못했거나 아직 JavaScript 도구를 사용하는 것이 편하지 않다면, [React를 HTML 페이지에서 일반적인 `<script>` 태그에 추가](/docs/add-react-to-a-website.html)하거나 [JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)를 고려하세요.

이 방법이 **제일 쉽게 React를 이미 만들어진 웹사이트에 추가하는 방법입니다**. 그리고 언제나 도움이 될 것 같으면 더 많은 툴체인을 추가할 수가 있습니다.

Expand Down
2 changes: 1 addition & 1 deletion content/docs/error-boundaries.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class ErrorBoundary extends React.Component {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
return this.props.children;
}
}
```
Expand Down
4 changes: 2 additions & 2 deletions content/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ React 문서가 어렵게 느껴진다면, [Tania Rascia가 쓴 React 개요](ht

### JavaScript 리소스 {#javascript-resources}

React 문서는 Javascript 프로그래밍에 익숙한 사람을 대상으로 쓰여져 있습니다. 전문가일 필요는 없지만, React와 JavaScript를 동시에 배우기는 어렵습니다.
React 문서는 JavaScript 프로그래밍에 익숙한 사람을 대상으로 쓰여져 있습니다. 전문가일 필요는 없지만, React와 JavaScript를 동시에 배우기는 어렵습니다.

[이 JavaScript 개요](https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript)를 읽고 여러분의 Javascript 수준을 확인하는 것을 권장합니다. 30분에서 1시간 정도 걸리겠지만 React를 익히는 데에 더 자신감이 생길 것입니다.
[이 JavaScript 개요](https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript)를 읽고 여러분의 JavaScript 수준을 확인하는 것을 권장합니다. 30분에서 1시간 정도 걸리겠지만 React를 익히는 데에 더 자신감이 생길 것입니다.

>
>
Expand Down
4 changes: 2 additions & 2 deletions content/docs/higher-order-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);

컴포넌트는 props를 UI로 변환하는 반면에, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다.

고차 컴포넌트(HOC)는 Redux의 [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect)와 Relay의 [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html)와 같은 서드 파티 리액트 라이브러리에서 흔하게 볼 수 있습니다.
고차 컴포넌트(HOC)는 Redux의 [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect)와 Relay의 [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer)와 같은 서드 파티 리액트 라이브러리에서 흔하게 볼 수 있습니다.

이 문서에서는 고차 컴포넌트가 유용한 이유를 보여주고, 직접 작성하는 방법에 대해 알아보겠습니다.

Expand Down Expand Up @@ -107,7 +107,7 @@ class BlogPost extends React.Component {
- 컴포넌트가 마운트 해제되면 change 리스너를 제거합니다.

규모가 큰 애플리케이션에서 `DataSource`를 구독하고 `setState` 를 호출하는 동일한 패턴이 반복적으로 발생한다고 가정해봅시다.
그렇게 된다면 이 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 하는 추상화가 필요하게 됩니다.
그렇게 된다면 이 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 하는 추상화가 필요하게 됩니다.
이러한 경우에 고차 컴포넌트를 사용하면 좋습니다.

`DataSource` 를 구독하는 `CommentList``BlogPost` 같은 컴포넌트를 생성하는 함수를 작성할 수 있습니다. 구독한 데이터를 prop으로 전달받는 자식 컴포넌트를 파라미터 중 하나로 받는 함수를 만듭니다. 이 함수를 `withSubscription` 라고 합시다.
Expand Down
Loading

0 comments on commit 3c447fb

Please sign in to comment.