From 9f037a60510f32f805916ed1092c033bd199276e Mon Sep 17 00:00:00 2001 From: Hewon Jeong Date: Tue, 12 Feb 2019 13:11:52 +0900 Subject: [PATCH 1/4] Translate composition-vs-inheritance --- content/docs/composition-vs-inheritance.md | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..30138285f 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -1,6 +1,6 @@ --- id: composition-vs-inheritance -title: Composition vs Inheritance +title: 합성 (Composition) vs 상속 (Inheritance) permalink: docs/composition-vs-inheritance.html redirect_from: - "docs/multiple-components.html" @@ -8,15 +8,15 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. +React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하기를 권장합니다. -In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition. +이 섹션에서는 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제들과 합성을 통해 이러한 문제를 해결하는 방법을 살펴볼 것입니다. -## Containment {#containment} +## 컴포넌트에서 다른 컴포넌트를 담기 {#containment} -Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes". +어떤 컴포넌트들은 어떤 자식 요소가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 일반적인 '박스' 역할을 하는 `Sidebar` 혹은 `Dialog`와 같은 컴포넌트에서 특히 일반적입니다. -We recommend that such components use the special `children` prop to pass children elements directly into their output: +이러한 컴포넌트에서는 특수한 `children` prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다. ```js{4} function FancyBorder(props) { @@ -28,7 +28,7 @@ function FancyBorder(props) { } ``` -This lets other components pass arbitrary children to them by nesting the JSX: +이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. ```js{4-9} function WelcomeDialog() { @@ -47,9 +47,9 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. +`` JSX 태그 안에 있는 것들이 `FancyBorder` 컴포넌트의 `children` prop으로 전달됩니다. `FancyBorder`는 `{props.children}`을 `
` 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다. -While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`: +덜 일반적이지만 종종 컴포넌트에 여러 개의 "구멍"이 필요할 수도 있습니다. 이런 경우에는 `children` 대신 자신만의 컨벤션을 사용할 수도 있습니다. ```js{5,8,18,21} function SplitPane(props) { @@ -80,13 +80,13 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React. +``와 ``같은 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 prop으로 전달할 수 있습니다. 이러한 접근은 다른 라이브러리의 "슬롯 (slots)"과 비슷해보이지만 React에서 prop으로 전달할 수 있는 것에는 제한이 없습니다. -## Specialization {#specialization} +## 특수화 {#specialization} -Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`. +때로는 어떤 컴포넌트의 "특수한 경우"인 컴포넌트를 고려해야 하는 경우가 있습니다. 예를 들어, `WelcomeDialog`는 `Dialog`의 특수한 경우라고 할 수 있습니다. -In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props: +React에서는 이 역시 합성을 통해 해결할 수 있습니다. 더 "구체적인" 컴포넌트가 "일반적인" 컴포넌트를 렌더링하고 props를 통해 내용을 구성합니다. ```js{5,8,16-18} function Dialog(props) { @@ -113,7 +113,7 @@ function WelcomeDialog() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -Composition works equally well for components defined as classes: +합성은 클래스로 정의된 컴포넌트에서도 동일하게 적용됩니다. ```js{10,27-31} function Dialog(props) { @@ -163,10 +163,10 @@ class SignUpDialog extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) -## So What About Inheritance? {#so-what-about-inheritance} +## 그렇다면 상속은? {#so-what-about-inheritance} -At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies. +Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했습니다. -Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. +props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 요소 혹은 함수 등 어떠한 props도 받을 수 있다는 것을 기억하세요. -If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. +UI가 아닌 기능을 컴포넌트 간에 재사용하기를 원한다면, 별도의 JavaScript 모듈로 추출하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다. 상속받을 필요 없이 말이죠. \ No newline at end of file From 4965f6a5137c6261d676acf30659c967b3f5e64c Mon Sep 17 00:00:00 2001 From: Hewon Jeong Date: Tue, 12 Feb 2019 14:35:57 +0900 Subject: [PATCH 2/4] apply review feedback(translate 'Try it on CodePen') --- content/docs/composition-vs-inheritance.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 30138285f..4189e48e4 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -45,7 +45,7 @@ function WelcomeDialog() { } ``` -**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** +**[CodePen에서 실행하기](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** `` JSX 태그 안에 있는 것들이 `FancyBorder` 컴포넌트의 `children` prop으로 전달됩니다. `FancyBorder`는 `{props.children}`을 `
` 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다. @@ -78,7 +78,7 @@ function App() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) ``와 ``같은 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 prop으로 전달할 수 있습니다. 이러한 접근은 다른 라이브러리의 "슬롯 (slots)"과 비슷해보이지만 React에서 prop으로 전달할 수 있는 것에는 제한이 없습니다. @@ -111,7 +111,7 @@ function WelcomeDialog() { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) 합성은 클래스로 정의된 컴포넌트에서도 동일하게 적용됩니다. @@ -161,7 +161,7 @@ class SignUpDialog extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## 그렇다면 상속은? {#so-what-about-inheritance} From ef832f211c2051cbdc267351c633d94c6c4cf191 Mon Sep 17 00:00:00 2001 From: Hewon Jeong Date: Wed, 13 Feb 2019 22:19:13 +0900 Subject: [PATCH 3/4] apply review feedbacks --- content/docs/composition-vs-inheritance.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 4189e48e4..3e4113251 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -8,13 +8,13 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하기를 권장합니다. +React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. -이 섹션에서는 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제들과 합성을 통해 이러한 문제를 해결하는 방법을 살펴볼 것입니다. +이번 문서에서는 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제들과 합성을 통해 이러한 문제를 해결하는 방법을 살펴볼 것입니다. ## 컴포넌트에서 다른 컴포넌트를 담기 {#containment} -어떤 컴포넌트들은 어떤 자식 요소가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 일반적인 '박스' 역할을 하는 `Sidebar` 혹은 `Dialog`와 같은 컴포넌트에서 특히 일반적입니다. +어떤 컴포넌트들은 어떤 자식 요소가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 '박스' 역할을 하는 `Sidebar` 혹은 `Dialog`와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 `children` prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다. @@ -49,7 +49,7 @@ function WelcomeDialog() { `` JSX 태그 안에 있는 것들이 `FancyBorder` 컴포넌트의 `children` prop으로 전달됩니다. `FancyBorder`는 `{props.children}`을 `
` 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다. -덜 일반적이지만 종종 컴포넌트에 여러 개의 "구멍"이 필요할 수도 있습니다. 이런 경우에는 `children` 대신 자신만의 컨벤션을 사용할 수도 있습니다. +흔하진 않지만 종종 컴포넌트에 여러 개의 "구멍"이 필요할 수도 있습니다. 이런 경우에는 `children` 대신 자신만의 고유한 방식을 적용할 수도 있습니다. ```js{5,8,18,21} function SplitPane(props) { @@ -169,4 +169,4 @@ Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌 props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 요소 혹은 함수 등 어떠한 props도 받을 수 있다는 것을 기억하세요. -UI가 아닌 기능을 컴포넌트 간에 재사용하기를 원한다면, 별도의 JavaScript 모듈로 추출하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다. 상속받을 필요 없이 말이죠. \ No newline at end of file +UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다. 상속받을 필요 없이 말이죠. \ No newline at end of file From 6cb636ebc83ea0ca1d63e08f807917fbc0020cdc Mon Sep 17 00:00:00 2001 From: Hewon Jeong Date: Sun, 17 Feb 2019 16:22:09 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix=20using=20a=20wrong=20term=20(=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=E2=86=92=20=EC=97=98=EB=A6=AC=EB=A8=BC=ED=8A=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/composition-vs-inheritance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 3e4113251..24020ca35 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -14,7 +14,7 @@ React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 ## 컴포넌트에서 다른 컴포넌트를 담기 {#containment} -어떤 컴포넌트들은 어떤 자식 요소가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 '박스' 역할을 하는 `Sidebar` 혹은 `Dialog`와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. +어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 '박스' 역할을 하는 `Sidebar` 혹은 `Dialog`와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 `children` prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다. @@ -167,6 +167,6 @@ class SignUpDialog extends React.Component { Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했습니다. -props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 요소 혹은 함수 등 어떠한 props도 받을 수 있다는 것을 기억하세요. +props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있다는 것을 기억하세요. UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다. 상속받을 필요 없이 말이죠. \ No newline at end of file