From 1b831f7a7e1a3ff56d72d525aa61911936c03992 Mon Sep 17 00:00:00 2001 From: Haegul Pyun Date: Wed, 13 Feb 2019 15:16:44 +0900 Subject: [PATCH 1/9] Update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d3c569401..43b1268ec 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -11,3 +11,11 @@ https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md If your PR references an existing issue, please add the issue number below --> + +**progress** + +[ ] 번역 초안 작성 +[ ] glossary 용어 확인 (wiki or issue links) +[ ] 띄어쓰기 검사 (http://speller.cs.pusan.ac.kr/) +[ ] 리뷰 반영 +[ ] 최종 PR From f39a82dd46471b355264bb3f4ea769b621cd2555 Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Sat, 16 Mar 2019 12:32:41 +0900 Subject: [PATCH 2/9] Translate render-props document --- content/docs/render-props.md | 102 +++++++++++++++++------------------ 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index c9b6f9c04..427f29d96 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -4,9 +4,9 @@ title: Render Props permalink: docs/render-props.html --- -The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function. +["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) 용어는 React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용한 간단한 테크닉입니다. -A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. +render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용합니다. ```jsx ( @@ -14,15 +14,15 @@ A component with a render prop takes a function that returns a React element and )}/> ``` -Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift). +render props를 사용하는 라이브러리는 [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods)와 [Downshift](https://github.com/paypal/downshift)가 있습니다. -In this document, we’ll discuss why render props are useful, and how to write your own. +이 문서에서는 왜 render props가 왜 유용하고, 어떻게 여러분의 프로젝트에 적용할 수 있을지에 관해 이야기 하겠습니다. -## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns} +## 횡단 관심사(Cross-Cutting Concerns)를 위한 render props 사용법 {#use-render-props-for-cross-cutting-concerns} -Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state. +컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다. -For example, the following component tracks the mouse position in a web app: +예를 들면, 아래 컨포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직을 가지고 있습니다: ```js class MouseTracker extends React.Component { @@ -50,14 +50,14 @@ class MouseTracker extends React.Component { } ``` -As the cursor moves around the screen, the component displays its (x, y) coordinates in a `

`. +스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 `

`에 나타냅니다. -Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component? +여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌에서 커서 위치에 대해 알아야 할 경우, 해당 행위를 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? -Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `` component that encapsulates the behavior we need to reuse elsewhere. +React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를 `` 컴포넌트로 캡슐화하여 어디서든 사용할 수 있게 리팩토링해 보겠습니다. ```js -// The component encapsulates the behavior we need... +// 컴포넌트는 우리가 원하는 행위를 캡슐화 합니다... class Mouse extends React.Component { constructor(props) { super(props); @@ -76,7 +76,7 @@ class Mouse extends React.Component { return (

- {/* ...but how do we render something other than a

? */} + {/* ...하지만

가 아닌 다른것을 렌더링하려면 어떻게 해야 할까요? */}

The current mouse position is ({this.state.x}, {this.state.y})

); @@ -95,11 +95,11 @@ class MouseTracker extends React.Component { } ``` -Now the `` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable. +이제 `` 컨포넌트는 mousemove 이벤트를 감지하고 마우스 커서의 `(x, y)`위치를 저장하는 행위를 캡슐화했습니다. 그러나 아직 완벽하게 재사용할 수 있는 건 아닙니다. -For example, let's say we have a `` component that renders the image of a cat chasing the mouse around the screen. We might use a `` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen. +예를 들어, 마우스 주위에 고양이 그림을 보여주는 `` 컴포넌트를 생각해 보겠습니다. 우리는 `` prop을 통해 Cat 컴포넌트에 마우스 좌표를 전달해주고 화면에 어떤 위치에 이미지를 보여줄지 알려 주고자 합니다. -As a first pass, you might try rendering the `` *inside ``'s `render` method*, like this: +첫 번째 방법으로는, 다음과 같이 `` 컴포넌트의 *render 메서드안에* `` 컨포넌트를 넣어 렌더링하는 방법이 있습니다: ```js class Cat extends React.Component { @@ -127,13 +127,13 @@ class MouseWithCat extends React.Component { render() { return ( -
- +
+ {/* - We could just swap out the

for a here ... but then - we would need to create a separate - component every time we need to use it, so - isn't really reusable yet. + 여기서

를 으로 바꿀 수 있습니다. ... 그러나 이 경우 + Mouse 컴포넌트를 사용할 때 마다 뱔도의 + 컴포넌트를 만들어야 합니다, 그러므로 는 + 아직 정말로 재사용이 가능한게 아닙니다. */}

@@ -153,9 +153,9 @@ class MouseTracker extends React.Component { } ``` -This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another ``) that renders something specifically for that use case. +이러한 접근 방법은 특정 사례에서는 적용할 수 있지만, 우리가 원하는 행위의 캡슐화(마우스 트랙킹)라는 목표는 달성하지 못했습니다. 이제 우리는 다른 사용 예제에서도 언제든지 마우스 위치를 추적할 수 있는 새로운 component(``과 근본적으로 다른)를 만들어야 합니다. -Here's where the render prop comes in: Instead of hard-coding a `` inside a `` component, and effectively changing its rendered output, we can provide `` with a function prop that it uses to dynamically determine what to render–a render prop. +여기에 render prop를 사용할 수 있습니다. `` 컴포넌트 안에 `` 컴포넌트를 하드 코딩(hard-coding)해서 결과물을 바꾸는 대신에, ``에게 동적으로 렌더링할 수 있도록 해주는 함수형 prop을 제공할 수 있습니다. — 이것이 render prop의 개념입니다. ```js class Cat extends React.Component { @@ -184,10 +184,10 @@ class Mouse extends React.Component { render() { return (
- + {/* - Instead of providing a static representation of what renders, - use the `render` prop to dynamically determine what to render. + 가 무엇을 렌더링하는지에 대해 명확히 코드로 표기하는 대신, + `render` prop을 사용하여 무엇을 렌더링할지 동적으로 결정할 수 있습니다. */} {this.props.render(this.state)}
@@ -209,17 +209,17 @@ class MouseTracker extends React.Component { } ``` -Now, instead of effectively cloning the `` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `` can use to dynamically determine what it renders. +이제 컴포넌트의 행위를 복제하기 위해 하드 코딩할 필요 없이 `render` 함수에 prop으로 전달해줌으로써, `` 컴포넌트는 동적으로 트래킹 기능을 가진 컴포넌트들을 렌더링할 수 있습니다. -More concretely, **a render prop is a function prop that a component uses to know what to render.** +정리하자면, **render prop은 무엇을 렌더링할지 컴포넌트에 알려주는 함수입니다.** -This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `` with a `render` prop that tells it what to render with the current (x, y) of the cursor. +이 테크닉은 행위(마우스 트래킹 같은)를 매우 쉽게 공유할 수 있도록 만들어 줍니다. 해당 행위를 적용하려면, `` 를 그리고 현재 (x, y) 커서 위치에 무엇을 그릴지에 대한 정보를 prop을 통해 넘겨주기만 하면 됩니다. -One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `` component, you could easily create one using a regular `` with a render prop: +render props에 대해 한가지 흥미로운 점은 대부분의 [higher-order components](/docs/higher-order-components.html)(HOC)에 render props pattern을 이식할 수 있습니다. 예를 들면, 만약에 컴포넌트보다 withMouse HOC를 더 선호한다면 render prop을 이용해서 다음과 같이 쉽게 HOC를 만들 수 있습니다. ```js -// If you really want a HOC for some reason, you can easily -// create one using a regular component with a render prop! +// 만약 어떤 이유 때문에 HOC를 만들기 원한다면, 쉽게 구현할 수 있습니다. +// render prop을 이용해서 일반적인 컴포넌트를 만드세요! function withMouse(Component) { return class extends React.Component { render() { @@ -233,13 +233,13 @@ function withMouse(Component) { } ``` -So using a render prop makes it possible to use either pattern. +따라서 render props를 사용하면 두 가지 패턴 모두 사용이 가능합니다. -## Using Props Other Than `render` {#using-props-other-than-render} +## `rener` 의외의 Props 사용법 {#using-props-other-than-render} -It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). +여기서 중요하게 기억해야 할 것은, “render props pattern”으로 불리는 이유로 *꼭 prop name으로 `render`를 사용할 필요는 없습니다.* 사실, [*어떤* 함수형 prop이든 render prop이 될 수 있습니다.](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) -Although the examples above use `render`, we could just as easily use the `children` prop! +위 예제에서는 `render`를 사용했지만, 우리는 `children` prop을 더 쉽게 사용할 수 있습니다. ```js ( @@ -247,7 +247,7 @@ Although the examples above use `render`, we could just as easily use the `child )}/> ``` -And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element! +실제로 JSX element의 “속성”목록에 하위 속성 이름(예를들면 render)을 지정할 필요는 없습니다. 대신에, element *안에* 직접 꽂아넣을 수 있습니다! ```js @@ -257,9 +257,9 @@ And remember, the `children` prop doesn't actually need to be named in the list ``` -You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API. +이 테크닉은 [react-motion](https://github.com/chenglou/react-motion) API에서 실제로 사용된 것을 볼 수 있습니다. -Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this. +이 테크닉은 자주 사용되지 않기 때문에, API를 디자인할 때 `children`은 함수 타입을 가지도록 `propTypes`를 지정하는 것이 좋습니다. ```js Mouse.propTypes = { @@ -267,17 +267,17 @@ Mouse.propTypes = { }; ``` -## Caveats {#caveats} +## 주의사항 {#caveats} -### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} +### React.PureComponent에서 render props pattern을 사용할 땐 주의해주세요. {#be-careful-when-using-render-props-with-reactpurecomponent} -Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop. +render props 패턴을 사용하면 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)를 사용할 때 발생하는 이점이 사라질 수 있습니다. 얕은 prop 비교는 새로운 prop에 대해 항상 `false`를 반환합니다. 이 경우 render마다 render prop으로 넘어온 값을 항상 새로 생성합니다. -For example, continuing with our `` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this: +위에서 사용했던 `` 컴포넌트를 이용해서 예를 들어보겠습니다. mouse에 `React.Component` 대신에 `React.PureComponent`를 사용하면 다음과 같은 코드가 됩니다. ```js class Mouse extends React.PureComponent { - // Same implementation as above... + // 위와 같은 구현체... } class MouseTracker extends React.Component { @@ -287,8 +287,8 @@ class MouseTracker extends React.Component {

Move the mouse around!

{/* - This is bad! The value of the `render` prop will - be different on each render. + 이것은 좋지 않습니다! `render` prop이 가지고 있는 값은 + 각각 다른 컴포넌트를 렌더링 할 것입니다. */} ( @@ -299,14 +299,14 @@ class MouseTracker extends React.Component { } ``` -In this example, each time `` renders, it generates a new function as the value of the `` prop, thus negating the effect of `` extending `React.PureComponent` in the first place! +이 예제에서 ``가 render 될때마다, ``의 prop으로 넘어가는 함수가 계속 새로 생성됩니다. 따라서 `React.PureComponent`를 상속받은 `` 컴포넌트 효과가 사라지게 됩니다. -To get around this problem, you can sometimes define the prop as an instance method, like so: +이 문제를 해결하기 위해서, 다음과 같이 인스턴스 메서를 사용해서 prop을 정의합니다: ```js class MouseTracker extends React.Component { - // Defined as an instance method, `this.renderTheCat` always - // refers to *same* function when we use it in render + // `this.renderTheCat`를 항상 생성하는 매서드를 정의합니다. + // 이것은 render를 사용할 때 마다 *같은* 함수를 참조합니다. renderTheCat(mouse) { return ; } @@ -322,4 +322,4 @@ class MouseTracker extends React.Component { } ``` -In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `` should extend `React.Component` instead. +만약 prop을 정적으로 정의할 수 없는 경우에는 `` 컴포넌트는 `React.Component`를 상속받아야 합니다. From 316a8e38dccbc56c94e80f5a262ff88da7de9d56 Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Sat, 16 Mar 2019 12:41:29 +0900 Subject: [PATCH 3/9] To make it easier to read --- content/docs/render-props.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 427f29d96..57d4493da 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -4,7 +4,7 @@ title: Render Props permalink: docs/render-props.html --- -["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) 용어는 React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용한 간단한 테크닉입니다. +["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다. render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용합니다. @@ -52,7 +52,7 @@ class MouseTracker extends React.Component { 스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 `

`에 나타냅니다. -여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌에서 커서 위치에 대해 알아야 할 경우, 해당 행위를 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? +여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를 `` 컴포넌트로 캡슐화하여 어디서든 사용할 수 있게 리팩토링해 보겠습니다. @@ -95,7 +95,7 @@ class MouseTracker extends React.Component { } ``` -이제 `` 컨포넌트는 mousemove 이벤트를 감지하고 마우스 커서의 `(x, y)`위치를 저장하는 행위를 캡슐화했습니다. 그러나 아직 완벽하게 재사용할 수 있는 건 아닙니다. +이제 `` 컨포넌트는 마우스 움직임 이벤트를 감지하고, 마우스 커서의 `(x, y)`위치를 저장하는 행위를 캡슐화했습니다. 그러나 아직 완벽하게 재사용할 수 있는 건 아닙니다. 예를 들어, 마우스 주위에 고양이 그림을 보여주는 `` 컴포넌트를 생각해 보겠습니다. 우리는 `` prop을 통해 Cat 컴포넌트에 마우스 좌표를 전달해주고 화면에 어떤 위치에 이미지를 보여줄지 알려 주고자 합니다. @@ -155,7 +155,7 @@ class MouseTracker extends React.Component { 이러한 접근 방법은 특정 사례에서는 적용할 수 있지만, 우리가 원하는 행위의 캡슐화(마우스 트랙킹)라는 목표는 달성하지 못했습니다. 이제 우리는 다른 사용 예제에서도 언제든지 마우스 위치를 추적할 수 있는 새로운 component(``과 근본적으로 다른)를 만들어야 합니다. -여기에 render prop를 사용할 수 있습니다. `` 컴포넌트 안에 `` 컴포넌트를 하드 코딩(hard-coding)해서 결과물을 바꾸는 대신에, ``에게 동적으로 렌더링할 수 있도록 해주는 함수형 prop을 제공할 수 있습니다. — 이것이 render prop의 개념입니다. +여기에 render prop를 사용할 수 있습니다. `` 컴포넌트 안에 `` 컴포넌트를 하드 코딩(hard-coding)해서 결과물을 바꾸는 대신에, ``에게 동적으로 렌더링할 수 있도록 해주는 함수 prop을 제공하는 것입니다. — 이것이 render prop의 개념입니다. ```js class Cat extends React.Component { @@ -271,7 +271,7 @@ Mouse.propTypes = { ### React.PureComponent에서 render props pattern을 사용할 땐 주의해주세요. {#be-careful-when-using-render-props-with-reactpurecomponent} -render props 패턴을 사용하면 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)를 사용할 때 발생하는 이점이 사라질 수 있습니다. 얕은 prop 비교는 새로운 prop에 대해 항상 `false`를 반환합니다. 이 경우 render마다 render prop으로 넘어온 값을 항상 새로 생성합니다. +render props 패턴을 사용하면 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)를 사용할 때 발생하는 이점이 사라질 수 있습니다. 얕은 prop 비교는 새로운 prop에 대해 항상 `false`를 반환합니다. 이 경우 `render`마다 render prop으로 넘어온 값을 항상 새로 생성합니다. 위에서 사용했던 `` 컴포넌트를 이용해서 예를 들어보겠습니다. mouse에 `React.Component` 대신에 `React.PureComponent`를 사용하면 다음과 같은 코드가 됩니다. From 04d29cd0c83553be24a4bf45fa7455a05426aa8c Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Tue, 2 Apr 2019 11:07:45 +0900 Subject: [PATCH 4/9] Fixed miss words --- content/docs/render-props.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 57d4493da..63d504ee3 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -52,7 +52,7 @@ class MouseTracker extends React.Component { 스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 `

`에 나타냅니다. -여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? +여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를 `` 컴포넌트로 캡슐화하여 어디서든 사용할 수 있게 리팩토링해 보겠습니다. @@ -95,11 +95,11 @@ class MouseTracker extends React.Component { } ``` -이제 `` 컨포넌트는 마우스 움직임 이벤트를 감지하고, 마우스 커서의 `(x, y)`위치를 저장하는 행위를 캡슐화했습니다. 그러나 아직 완벽하게 재사용할 수 있는 건 아닙니다. +이제 `` 컴포넌트는 마우스 움직임 이벤트를 감지하고, 마우스 커서의 `(x, y)`위치를 저장하는 행위를 캡슐화했습니다. 그러나 아직 완벽하게 재사용할 수 있는 건 아닙니다. 예를 들어, 마우스 주위에 고양이 그림을 보여주는 `` 컴포넌트를 생각해 보겠습니다. 우리는 `` prop을 통해 Cat 컴포넌트에 마우스 좌표를 전달해주고 화면에 어떤 위치에 이미지를 보여줄지 알려 주고자 합니다. -첫 번째 방법으로는, 다음과 같이 `` 컴포넌트의 *render 메서드안에* `` 컨포넌트를 넣어 렌더링하는 방법이 있습니다: +첫 번째 방법으로는, 다음과 같이 `` 컴포넌트의 *render 메서드안에* `` 컴포넌트를 넣어 렌더링하는 방법이 있습니다: ```js class Cat extends React.Component { @@ -131,7 +131,7 @@ class MouseWithCat extends React.Component { {/* 여기서

를 으로 바꿀 수 있습니다. ... 그러나 이 경우 - Mouse 컴포넌트를 사용할 때 마다 뱔도의 + Mouse 컴포넌트를 사용할 때 마다 별도의 컴포넌트를 만들어야 합니다, 그러므로 는 아직 정말로 재사용이 가능한게 아닙니다. */} @@ -235,7 +235,7 @@ function withMouse(Component) { 따라서 render props를 사용하면 두 가지 패턴 모두 사용이 가능합니다. -## `rener` 의외의 Props 사용법 {#using-props-other-than-render} +## `rener` 이외의 Props 사용법 {#using-props-other-than-render} 여기서 중요하게 기억해야 할 것은, “render props pattern”으로 불리는 이유로 *꼭 prop name으로 `render`를 사용할 필요는 없습니다.* 사실, [*어떤* 함수형 prop이든 render prop이 될 수 있습니다.](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) @@ -301,7 +301,7 @@ class MouseTracker extends React.Component { 이 예제에서 ``가 render 될때마다, ``의 prop으로 넘어가는 함수가 계속 새로 생성됩니다. 따라서 `React.PureComponent`를 상속받은 `` 컴포넌트 효과가 사라지게 됩니다. -이 문제를 해결하기 위해서, 다음과 같이 인스턴스 메서를 사용해서 prop을 정의합니다: +이 문제를 해결하기 위해서, 다음과 같이 인스턴스 메서드를 사용해서 prop을 정의합니다: ```js class MouseTracker extends React.Component { From 13a9ec81773c113542b56e043aa81b3970b09c65 Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Tue, 2 Apr 2019 11:09:07 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=EC=BB=A8=ED=8F=AC=EB=84=8C=ED=8A=B8=20->?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 63d504ee3..e31ef94a6 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -22,7 +22,7 @@ render props를 사용하는 라이브러리는 [React Router](https://reacttrai 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다. -예를 들면, 아래 컨포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직을 가지고 있습니다: +예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직을 가지고 있습니다: ```js class MouseTracker extends React.Component { From 3c1784b866dfdf621676c30d50fd661a1d9e65e8 Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Sat, 6 Apr 2019 12:12:06 +0900 Subject: [PATCH 6/9] Translate README.md --- README.md | 82 +++++++++++++++++++++++++++---------------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 3044c0d66..05f73df31 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,70 @@ # reactjs.org -This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). +이 저장소는 [reactjs.org](https://reactjs.org/)의 소스 코드와 개발 문서를 포함하고 있습니다. -## Getting started +## 시작하기 -### Prerequisites +### 사전 준비 1. Git -1. Node: any 8.x version starting with 8.4.0 or greater -1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) -1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine +1. Node: 8.4.0 이상으로 시작하는 모든 8.x 버전 +1. Yarn: [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 참고 +1. 포크한 개인 저장소 +1. 로컬에 클론(Clone) 한 [reactjs.org repo](https://github.com/reactjs/reactjs.org) 개인 저장소 -### Installation +### 설치 -1. `cd reactjs.org` to go into the project root -1. `yarn` to install the website's npm dependencies +1. `cd reactjs.org`를 실행하여 프로젝트 경로로 이동합니다. +1. `yarn`을 이용하여 npm 의존성 모듈들을 설치합니다. -### Running locally +### 개발 서버 실행하기 -1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) -1. `open http://localhost:8000` to open the site in your favorite browser +1. `yarn dev` 명령어를 사용하여 hot-reloading 개발 서버를 시작합니다. (powered by [Gatsby](https://www.gatsbyjs.org)) +1. `open http://localhost:8000` 명령어를 사용하여 선호하는 브라우저로 접속하세요. -## Contributing +## 기여방법 -### Guidelines +### 가이드라인 -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +이 문서는 목적이 다른 여러 섹션으로 나뉘게 됩니다. 만약 문장을 추가할 계획이라면, 적절한 섹션에 대한 [가이드라인](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text)을 숙지하는 것이 도움이 될 것입니다. -### Create a branch +### 브랜치(branch) 만들기 -1. `git checkout master` from any folder in your local `reactjs.org` repository -1. `git pull origin master` to ensure you have the latest main code -1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch +1. `reactjs.org` 로컬 저장소에서 `git checkout master`를 실행합니다. +1. `git pull origin master`를 실행하여 최신 원본 코드를 보장할 수 있습니다. +1. `git checkout -b the-name-of-my-branch` (`the-name-of-my-branch` 를 적절한 이름으로 교체)를 실행하여 브랜치를 만듭니다. -### Make the change +### 수정하기 -1. Follow the "Running locally" instructions -1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server +1. "개발 서버 실행하기" 부분을 따릅니다. +1. 파일을 저장하고 브라우저에서 확인합니다. + 1.`src`안에 있는 React 컴포넌트가 수정될 경우 hot-reload가 적용됩니다. + 1. `content`안에 있는 마크다운 파일이 수정될 경우 hot-reload가 적용됩니다. + 1. 만약 플러그인을 사용하는 경우, `.cache` 디렉토리를 제거한 후 서버를 재시작해야 합니다. -### Test the change +### 수정사항 체크하기 -1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) +1. 가능하다면, 변경한 부분에 대해서 많이 사용하는 브라우저의 최신 버전에서 시각적으로 제대로 적용되었는지 확인해주세요. (데스크탑과 모바일 모두) +1. 프로젝트 루트에서 `yarn check-all`를 실행합니다. (이 명령어는 Prettier, ESLint, 그리고 Flow를 실행합니다.) -### Push it +### Push 하기 -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes +1. `git add -A && git commit -m "My message"` (`My message` 부분을 `Fixed header logo on Android` 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요. 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. -1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change. +1. [reactjs.org repo](https://github.com/reactjs/reactjs.org)에서 최근에 푸시된 브랜치를 볼 수 있습니다. +1. Github 지침을 따라주세요. +1. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. PR을 만들고 다른사람들이 수정사항을 볼 수 있게되면, Netlify가 자동적으로 빌드할 것입니다. -## Translation +## 변역 -If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). +만약 `reactjs.org` 번역에 흥미가 있다면, [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/)에서 현재 번역이 얼마나 진행되었는지 확인해주세요. +만약 번역하려는 언어가 아직 진행되지 않았다면, 해당 언어에 대해 새롭게 만들 수 있습니다. [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg)를 참고해주세요. -If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). +## 문제 해결하기 -## Troubleshooting +- `yarn reset` 명령어를 사용하여 로컬 캐시를 초기화합니다. -- `yarn reset` to clear the local cache +## 저작권 +위 내용에 대한 저작권은 [reactjs.org](https://reactjs.org/)가 가지고 있으며, [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md)에서 볼 수 있는 CC-BY-4.0 라이센스를 따릅니다. -## License -Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file. From 21274d5dc0e004f6a900ef0a0c7b28e60a42c22a Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Sat, 6 Apr 2019 12:15:20 +0900 Subject: [PATCH 7/9] Rollback --- README.md | 82 +++++++++++++++++++++++++++---------------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 05f73df31..3044c0d66 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,70 @@ # reactjs.org -이 저장소는 [reactjs.org](https://reactjs.org/)의 소스 코드와 개발 문서를 포함하고 있습니다. +This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). -## 시작하기 +## Getting started -### 사전 준비 +### Prerequisites 1. Git -1. Node: 8.4.0 이상으로 시작하는 모든 8.x 버전 -1. Yarn: [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 참고 -1. 포크한 개인 저장소 -1. 로컬에 클론(Clone) 한 [reactjs.org repo](https://github.com/reactjs/reactjs.org) 개인 저장소 +1. Node: any 8.x version starting with 8.4.0 or greater +1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) +1. A fork of the repo (for any contributions) +1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine -### 설치 +### Installation -1. `cd reactjs.org`를 실행하여 프로젝트 경로로 이동합니다. -1. `yarn`을 이용하여 npm 의존성 모듈들을 설치합니다. +1. `cd reactjs.org` to go into the project root +1. `yarn` to install the website's npm dependencies -### 개발 서버 실행하기 +### Running locally -1. `yarn dev` 명령어를 사용하여 hot-reloading 개발 서버를 시작합니다. (powered by [Gatsby](https://www.gatsbyjs.org)) -1. `open http://localhost:8000` 명령어를 사용하여 선호하는 브라우저로 접속하세요. +1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) +1. `open http://localhost:8000` to open the site in your favorite browser -## 기여방법 +## Contributing -### 가이드라인 +### Guidelines -이 문서는 목적이 다른 여러 섹션으로 나뉘게 됩니다. 만약 문장을 추가할 계획이라면, 적절한 섹션에 대한 [가이드라인](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text)을 숙지하는 것이 도움이 될 것입니다. +The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. -### 브랜치(branch) 만들기 +### Create a branch -1. `reactjs.org` 로컬 저장소에서 `git checkout master`를 실행합니다. -1. `git pull origin master`를 실행하여 최신 원본 코드를 보장할 수 있습니다. -1. `git checkout -b the-name-of-my-branch` (`the-name-of-my-branch` 를 적절한 이름으로 교체)를 실행하여 브랜치를 만듭니다. +1. `git checkout master` from any folder in your local `reactjs.org` repository +1. `git pull origin master` to ensure you have the latest main code +1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch -### 수정하기 +### Make the change -1. "개발 서버 실행하기" 부분을 따릅니다. -1. 파일을 저장하고 브라우저에서 확인합니다. - 1.`src`안에 있는 React 컴포넌트가 수정될 경우 hot-reload가 적용됩니다. - 1. `content`안에 있는 마크다운 파일이 수정될 경우 hot-reload가 적용됩니다. - 1. 만약 플러그인을 사용하는 경우, `.cache` 디렉토리를 제거한 후 서버를 재시작해야 합니다. +1. Follow the "Running locally" instructions +1. Save the files and check in the browser + 1. Changes to React components in `src` will hot-reload + 1. Changes to markdown files in `content` will hot-reload + 1. If working with plugins, you may need to remove the `.cache` directory and restart the server -### 수정사항 체크하기 +### Test the change -1. 가능하다면, 변경한 부분에 대해서 많이 사용하는 브라우저의 최신 버전에서 시각적으로 제대로 적용되었는지 확인해주세요. (데스크탑과 모바일 모두) -1. 프로젝트 루트에서 `yarn check-all`를 실행합니다. (이 명령어는 Prettier, ESLint, 그리고 Flow를 실행합니다.) +1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. +1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) -### Push 하기 +### Push it -1. `git add -A && git commit -m "My message"` (`My message` 부분을 `Fixed header logo on Android` 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요. +1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes 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. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. +1. Follow GitHub's instructions. +1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change. -## 변역 +## Translation -만약 `reactjs.org` 번역에 흥미가 있다면, [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/)에서 현재 번역이 얼마나 진행되었는지 확인해주세요. +If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). -만약 번역하려는 언어가 아직 진행되지 않았다면, 해당 언어에 대해 새롭게 만들 수 있습니다. [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg)를 참고해주세요. -## 문제 해결하기 +If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). -- `yarn reset` 명령어를 사용하여 로컬 캐시를 초기화합니다. +## Troubleshooting -## 저작권 -위 내용에 대한 저작권은 [reactjs.org](https://reactjs.org/)가 가지고 있으며, [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md)에서 볼 수 있는 CC-BY-4.0 라이센스를 따릅니다. +- `yarn reset` to clear the local cache +## License +Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file. From bb52e50e60b919ea217b9babc53d6f282b924a69 Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Mon, 8 Apr 2019 23:40:06 +0900 Subject: [PATCH 8/9] Update Feedback of simsim0709. --- content/docs/render-props.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index e31ef94a6..76e2d54bd 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -16,13 +16,13 @@ render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 render props를 사용하는 라이브러리는 [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods)와 [Downshift](https://github.com/paypal/downshift)가 있습니다. -이 문서에서는 왜 render props가 왜 유용하고, 어떻게 여러분의 프로젝트에 적용할 수 있을지에 관해 이야기 하겠습니다. +이 문서에서는 render props가 왜 유용하고, 어떻게 여러분의 프로젝트에 적용할 수 있을지에 관해 이야기 하겠습니다. ## 횡단 관심사(Cross-Cutting Concerns)를 위한 render props 사용법 {#use-render-props-for-cross-cutting-concerns} 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다. -예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직을 가지고 있습니다: +예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다: ```js class MouseTracker extends React.Component { @@ -153,7 +153,7 @@ class MouseTracker extends React.Component { } ``` -이러한 접근 방법은 특정 사례에서는 적용할 수 있지만, 우리가 원하는 행위의 캡슐화(마우스 트랙킹)라는 목표는 달성하지 못했습니다. 이제 우리는 다른 사용 예제에서도 언제든지 마우스 위치를 추적할 수 있는 새로운 component(``과 근본적으로 다른)를 만들어야 합니다. +이러한 접근 방법은 특정 사례에서는 적용할 수 있지만, 우리가 원하는 행위의 캡슐화(마우스 트래킹)라는 목표는 달성하지 못했습니다. 이제 우리는 다른 사용 예제에서도 언제든지 마우스 위치를 추적할 수 있는 새로운 component(``과 근본적으로 다른)를 만들어야 합니다. 여기에 render prop를 사용할 수 있습니다. `` 컴포넌트 안에 `` 컴포넌트를 하드 코딩(hard-coding)해서 결과물을 바꾸는 대신에, ``에게 동적으로 렌더링할 수 있도록 해주는 함수 prop을 제공하는 것입니다. — 이것이 render prop의 개념입니다. @@ -235,7 +235,7 @@ function withMouse(Component) { 따라서 render props를 사용하면 두 가지 패턴 모두 사용이 가능합니다. -## `rener` 이외의 Props 사용법 {#using-props-other-than-render} +## `render` 이외의 Props 사용법 {#using-props-other-than-render} 여기서 중요하게 기억해야 할 것은, “render props pattern”으로 불리는 이유로 *꼭 prop name으로 `render`를 사용할 필요는 없습니다.* 사실, [*어떤* 함수형 prop이든 render prop이 될 수 있습니다.](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) @@ -247,7 +247,7 @@ function withMouse(Component) { )}/> ``` -실제로 JSX element의 “속성”목록에 하위 속성 이름(예를들면 render)을 지정할 필요는 없습니다. 대신에, element *안에* 직접 꽂아넣을 수 있습니다! +실제로 JSX element의 “어트리뷰트”목록에 하위 어트리뷰트 이름(예를들면 render)을 지정할 필요는 없습니다. 대신에, element *안에* 직접 꽂아넣을 수 있습니다! ```js From 2d4309d68843dc8e5a8851c3bc66a4af834a2d6a Mon Sep 17 00:00:00 2001 From: hg-pyun Date: Fri, 12 Apr 2019 21:43:09 +0900 Subject: [PATCH 9/9] Remove colons --- content/docs/render-props.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 76e2d54bd..3802a9f68 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -22,7 +22,7 @@ render props를 사용하는 라이브러리는 [React Router](https://reacttrai 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다. -예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다: +예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다. ```js class MouseTracker extends React.Component { @@ -52,7 +52,7 @@ class MouseTracker extends React.Component { 스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 `

`에 나타냅니다. -여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? +여기서 질문입니다. 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를 `` 컴포넌트로 캡슐화하여 어디서든 사용할 수 있게 리팩토링해 보겠습니다. @@ -99,7 +99,7 @@ class MouseTracker extends React.Component { 예를 들어, 마우스 주위에 고양이 그림을 보여주는 `` 컴포넌트를 생각해 보겠습니다. 우리는 `` prop을 통해 Cat 컴포넌트에 마우스 좌표를 전달해주고 화면에 어떤 위치에 이미지를 보여줄지 알려 주고자 합니다. -첫 번째 방법으로는, 다음과 같이 `` 컴포넌트의 *render 메서드안에* `` 컴포넌트를 넣어 렌더링하는 방법이 있습니다: +첫 번째 방법으로는, 다음과 같이 `` 컴포넌트의 *render 메서드안에* `` 컴포넌트를 넣어 렌더링하는 방법이 있습니다. ```js class Cat extends React.Component {