[v2] react modern/props handling #23

constmoon · 2020-04-12T20:43:09Z

No description provided.

constmoon · 2020-04-12T20:51:46Z

manuscript/react-modern/props-handling.md

@@ -73,9 +73,9 @@ const Search = ({ search, onSearch }) => (
 );
 ~~~~~~~

-React's `props` are rarely used in components by themselves; rather, all the information that comes with the `props` object used as a container that's actually used in the component. By destructuring the `props` object right away in the function signature, we can conveniently access all information without dealing with its container.
+리액트 컴포넌트 안에서 `props`를 그 자체로 사용하는 경우는 드뭅니다. `props` 객체에 담긴 모든 정보는 컨테이너로 사용되며, 이것이 실제로 컴포넌트에서 사용하는 방법입니다. `props` 객체를 함수 시그니처에서 구조 분해함으로써, 컨테이너 안에서 모든 정보를 처리하지 않고 필요한 정보만 편하게 가져올 수 있습니다.


함수 시그니처에서 구조 분해를 하면 생기는 이점에 대해서 이야기하는 거라 생각했는데, 이때 used as a container that's actually used in the component. 가 무슨 뜻인지 명확히 이해하지 못했어요. 이 부분 피드백을 부탁드립니다.

컴포넌트 안에서 props를 객체 그 자체로 사용하는 일은 드뭅니다. props는 실제 컴포넌트에서 사용되는 정보가 담긴 컨테이너와 같습니다.props 객체를 구조 분해해 필요한 정보만 가져올 수 있습니다.

라고 수정하면 어떨까요?

sujinleeme

, 가 많은데 검사기로 확인해주세요.

여기 PR을 확인해주세요.
#21 (review)

sujinleeme · 2020-04-12T23:33:41Z

manuscript/react-modern/props-handling.md


-*Note: The following refactorings are recommended for you to learn different JavaScript/React patterns, though you can still build complete React applications without them. Consider this advanced React techniques that will make your source code more concise.*
+*메모: 다음 리팩터링은 다른 자바스크립트/리액트 패턴을 학습하는 데에는 권장하지만, 이러한 과정 없이도 온전한 리액트 애플리케이션을 만들 수 있습니다. 소스 코드를 보다 간결하게 만드는 리액트 고급 테크닉에 대해 고려해보세요.*


아래 리팩터링은 부가적인 자바스크립트/리액트 패턴을 학습을 위한 것으로 수정하면 어떨까 싶네요.

sujinleeme · 2020-04-12T23:34:11Z

manuscript/react-modern/props-handling.md


-Props are passed from parent to child down the component tree. Since we use props to transport information from component A to component B frequently, and sometimes via component C, it is useful to know a few tricks to make this more convenient.
+Props는 컴포넌트 트리 안에서 부모로부터 자식에게 전달됩니다. Props를 사용하여 컴포넌트 A에서 컴포넌트 B에게 데이터를 전달하는 경우가 많고, 때로는 컴포넌트 C를 통해 전달하기도 합니다. Props를 더 편리하게 사용할 수 있는 몇 가지 요령에 대해 알아봅시다.


요령 을 방법으로 수정해주세요.

수진님께서 이전에 제목 끝에 (Advanced) 가 있을 때 [심화] 제목 형태로 쓰는 것을 제안해주셨는데요. 맞춰 쓰면 어떨까요?

(심화)가 아니라 [심화]인가요? @yeseulo

@constmoon 네, 제가 async/await 번역했는데 제목을 [심화] 리액트에서 Async와 Await 사용하기 이렇게 했었습니다. (링크)

sujinleeme · 2020-04-12T23:34:47Z

manuscript/react-modern/props-handling.md

 const { firstName, lastName } = user;

 console.log(firstName + ' ' + lastName);
 // "Robin Wieruch"
 ~~~~~~~

-This JavaScript feature is called [object destructuring in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). If we need to access multiple properties of an object, using one line of code instead of multiple lines is simpler and more elegant. Let's transfer this knowledge to React props in our Search component:
+이러한 기능을 [자바스크립트에서의 구조 분해](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)라고 합니다. 객체의 여러 속성에 접근해야 하는 경우, 여러 줄 대신 한 줄의 코드를 사용하는 것이 더 간단하고 명료합니다. 이제 Search 컴포넌트의 props에 적용해봅시다.


자바스크립트 구조 분해(destructuring) 으로 수정해주세요.

sujinleeme · 2020-04-12T23:35:27Z

manuscript/react-modern/props-handling.md


 {title="src/App.js",lang="javascript"}
 ~~~~~~~
-// version 2 (I)
+// 두 번째 버전 (1)


로마자 숫자 (I)을 (1)로 번경하신 이유가 뭔지 알 수 있을까요?

로마자는 영문 표기라 번역에서 1로 바꿨습니다. 어색하면 다시 I로 돌려놓겠습니다. @sujinleeme

sujinleeme · 2020-04-12T23:36:33Z

manuscript/react-modern/props-handling.md

@@ -236,11 +236,11 @@ const List = ({ list }) =>
 ));
 ~~~~~~~

-While this version is very concise, it comes with  advanced JavaScript features that may be unknown to some. The third way of handling this situation is to keep it the same as before:
+이 버전은 매우 간결하지만, 일부는 이해하기 어려운 고급 자바스크립트 문법을 사용합니다. 이런 문제를 해결하는 세 번째 방법은 이전과 동일한 형태를 유지하는 것입니다.


일부는 이해하기 어려운 고급 자바스크립트 문법 -> 자바스크립트 고급 문법으로 수정해주세요.

이런 문제를 해결하는 세 번째 방법은 이전과 동일한 형태를 유지하는 것입니다.??
이 문장을 수정해주세요.

sujinleeme · 2020-04-12T23:36:56Z

manuscript/react-modern/props-handling.md

+* [자바스크립트의 나머지 파라미터](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)에 대해 읽어보세요.
+* 자바스크립트를 더 잘 이해할 수 있는 부분(전개 연산자, 나머지 파라미터, 구조 분해)들에 대해 알아보고 어떤 것들이 리액트(예: props)와 연관되어있는지 생각해보세요.
+* React의 props를 핸들링하는 나만의 방법을 찾아보세요. 아직 결정하지 못했다면 이전 장에서 사용한 버전에 대해서도 생각해보세요.


리액트 로 고쳐주세요

yeseulo · 2020-04-13T13:59:55Z

manuscript/react-modern/props-handling.md


-All these versions have their pros and cons. When refactoring a component, always aim for readability, especially when working in a team of people, and make sure make sure they're using a common React code style.
+위 세 가지 버전에는 모두 장단점이 있습니다. 컴포넌트를 리팩터링 할 때는, 항상 가독성을 신경쓰세요. 특히 여러 사람들로 구성된 팀에서 작업을 할 때는, 공통적으로 사용하는 리액트 코드 스타일을 잊지 마세요.


앞 뒤 문장의 관계나 의미 측면에서 국문 표현에 쉼표가 꼭 필요하지 않아 보이는데 생략하면 어떨까요

yeseulo · 2020-04-13T14:00:25Z

manuscript/react-modern/props-handling.md


-### Exercises:
+### 읽어보기



실습하기 로 제안합니다.

이전에 머지되었던 여러 번역에서 읽어보기로 표기해서 이번에도 마찬가지로 썼어요. 그런데 다른 분들 번역을 보니 실습하기를 많이 쓰셔서 저도 실습하기로 수정하겠습니다. 지적 감사합니다

constmoon · 2020-04-14T08:11:11Z

리뷰 반영하여 수정했습니다!

constmoon added 2 commits April 13, 2020 04:06

Translate react-modern/props handling

8a7dc73

빠진 내용 추가

31bc270

constmoon commented Apr 12, 2020

View reviewed changes

sujinleeme suggested changes Apr 12, 2020

View reviewed changes

yeseulo reviewed Apr 13, 2020

View reviewed changes

리뷰 반영하여 수정

2c7bffc

constmoon requested review from sujinleeme and yeseulo April 14, 2020 08:11

sujinleeme merged commit b2b7cb2 into v2 Apr 15, 2020

sujinleeme deleted the v2-react-modern-props-handling branch April 15, 2020 21:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v2] react modern/props handling #23

[v2] react modern/props handling #23

constmoon commented Apr 12, 2020

constmoon Apr 12, 2020

sujinleeme Apr 12, 2020

sujinleeme left a comment •

edited

Loading

sujinleeme Apr 12, 2020

sujinleeme Apr 12, 2020 •

edited

Loading

yeseulo Apr 13, 2020

constmoon Apr 14, 2020

yeseulo Apr 14, 2020

sujinleeme Apr 12, 2020

sujinleeme Apr 12, 2020

constmoon Apr 14, 2020

sujinleeme Apr 12, 2020

sujinleeme Apr 12, 2020

yeseulo Apr 13, 2020

yeseulo Apr 13, 2020

constmoon Apr 14, 2020

constmoon commented Apr 14, 2020


		Note: The following refactorings are recommended for you to learn different JavaScript/React patterns, though you can still build complete React applications without them. Consider this advanced React techniques that will make your source code more concise.
		메모: 다음 리팩터링은 다른 자바스크립트/리액트 패턴을 학습하는 데에는 권장하지만, 이러한 과정 없이도 온전한 리액트 애플리케이션을 만들 수 있습니다. 소스 코드를 보다 간결하게 만드는 리액트 고급 테크닉에 대해 고려해보세요.


		Props are passed from parent to child down the component tree. Since we use props to transport information from component A to component B frequently, and sometimes via component C, it is useful to know a few tricks to make this more convenient.
		Props는 컴포넌트 트리 안에서 부모로부터 자식에게 전달됩니다. Props를 사용하여 컴포넌트 A에서 컴포넌트 B에게 데이터를 전달하는 경우가 많고, 때로는 컴포넌트 C를 통해 전달하기도 합니다. Props를 더 편리하게 사용할 수 있는 몇 가지 요령에 대해 알아봅시다.


		All these versions have their pros and cons. When refactoring a component, always aim for readability, especially when working in a team of people, and make sure make sure they're using a common React code style.
		위 세 가지 버전에는 모두 장단점이 있습니다. 컴포넌트를 리팩터링 할 때는, 항상 가독성을 신경쓰세요. 특히 여러 사람들로 구성된 팀에서 작업을 할 때는, 공통적으로 사용하는 리액트 코드 스타일을 잊지 마세요.


		### Exercises:
		### 읽어보기

[v2] react modern/props handling #23

[v2] react modern/props handling #23

Conversation

constmoon commented Apr 12, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sujinleeme left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sujinleeme Apr 12, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

constmoon commented Apr 14, 2020

sujinleeme left a comment •

edited

Loading

sujinleeme Apr 12, 2020 •

edited

Loading