Translate state-and -lifecycle by rlagksruf16 · Pull Request #95 · reactjs/ko.react.dev
| ## Converting a Function to a Class {#converting-a-function-to-a-class} | ||
|
|
||
| You can convert a function component like `Clock` to a class in five steps: | ||
| ## 함수형에서 클래스로 변환하기 {#converting-a-function-to-a-class} |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영하였습니다!
| ## 함수형에서 클래스로 변환하기 {#converting-a-function-to-a-class} | ||
|
|
||
| 1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends `React.Component`. | ||
| 다섯 단계로 `Clock`과 같은 함수형 컴포넌트를 클래스로 변환할 수 있습니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
함수형 -> 함수
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!
| 다섯 단계로 `Clock`과 같은 함수형 컴포넌트를 클래스로 변환할 수 있습니다. | ||
|
|
||
| 2. Add a single empty method to it called `render()`. | ||
| 1. `React.Component`를 확장하는 동일한 이름의 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)를 생성합니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!
| ``` | ||
|
|
||
| 2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`: | ||
| 2) 초기 `this.state`를 지정하는 [클래스 constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)를 추가합니다. |
| ## 생명주기 메서드를 클래스에 추가하기 {#adding-lifecycle-methods-to-a-class} | ||
|
|
||
| In applications with many components, it's very important to free up resources taken by the components when they are destroyed. | ||
| 많은 컴포넌트가 있는 응용프로그램에서 컴포넌트가 삭제될 때 해당 컴포넌트가 사용 중이던 리소스를 확보하는 것이 중요합니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
응용프로그램->애플리케이션(Translate Glossary)확보하는 것이 중요합니다.->정리하는 것이 중요합니다.free up의 번역에 대해 제안드려봐요.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
free up 을 확보하다 라는 의미로 번역하였는데 어떻게 생각하시나요!
| ``` | ||
|
|
||
| The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`. | ||
| T병합은 얕게 이루어지기 때문에 `this.setState({comments})`는 `this.state.posts`에 영향을 주진 않지만 `this.state.comments`는 완전히 대체됩니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
T병합 -> 병합
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!
| T병합은 얕게 이루어지기 때문에 `this.setState({comments})`는 `this.state.posts`에 영향을 주진 않지만 `this.state.comments`는 완전히 대체됩니다. | ||
|
|
||
| ## The Data Flows Down {#the-data-flows-down} | ||
| ## 데이터 흐름은 아래로 {#the-data-flows-down} |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다른 h2 제목과 맞추기 위해 데이터는 아래로 흐릅니다.로 제안드려요.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!
| ## 데이터 흐름은 아래로 {#the-data-flows-down} | ||
|
|
||
| Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. | ||
| 부모 컴포넌트나 자식 컴포넌트 모두 특정 컴포넌트가 유상태인지 또는 무상태인지 알 수 없고, 그들이 함수형이나 클래스로 정의되었는지에 대해서 관심을 가질 필요가 없습니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
함수형 -> 함수
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!
| 일반적으로 이를 "하향식(top-down)" 또는 "단방향식" 데이터 흐름이라고 합니다. 모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 "아래"에 있는 컴포넌트에만 영향을 미칩니다. | ||
|
|
||
| If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down. | ||
| 트리구조가 prop들의 폭포라고 상상하면 각 컴포넌트의 state는 임의의 점에서 만나지만 동시에 아래로 흐르는 부가적인 수원이라고 할 수 있습니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop->props수원보다 좋은 표현이 아직까지 떠오르지 않는데 한자어라 그런지 와닿지 않는거 같아요.수원(water source)처럼 영어와 같이 병기하는게 어떨까요?
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
사실 저도 수원이라는게 말이 전혀 와닿지 않는거 같네요! 병기해서 표기하도록 할께요 감사합니다!
| 트리구조가 prop들의 폭포라고 상상하면 각 컴포넌트의 state는 임의의 점에서 만나지만 동시에 아래로 흐르는 부가적인 수원이라고 할 수 있습니다. | ||
|
|
||
| To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s: | ||
| 모든 컴포넌트가 완전히 독립적이라는 것을 보여주기 위해 `App`와 렌더링하는 세 개의 `<Clock>`을 만들었습니다. |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
App와 -> App과
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영했습니다!