File tree Expand file tree Collapse file tree 1 file changed +3
-3
lines changed Expand file tree Collapse file tree 1 file changed +3
-3
lines changed Original file line number Diff line number Diff line change @@ -22,7 +22,7 @@ render props를 사용하는 라이브러리는 [React Router](https://reacttrai
22
22
23
23
컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다.
24
24
25
- 예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다:
25
+ 예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다.
26
26
27
27
``` js
28
28
class MouseTracker extends React .Component {
@@ -52,7 +52,7 @@ class MouseTracker extends React.Component {
52
52
53
53
스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 ` <p> ` 에 나타냅니다.
54
54
55
- 여기서 질문입니다: 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까?
55
+ 여기서 질문입니다. 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까?
56
56
57
57
React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를 ` <Mouse> ` 컴포넌트로 캡슐화하여 어디서든 사용할 수 있게 리팩토링해 보겠습니다.
58
58
@@ -99,7 +99,7 @@ class MouseTracker extends React.Component {
99
99
100
100
예를 들어, 마우스 주위에 고양이 그림을 보여주는 ` <Cat> ` 컴포넌트를 생각해 보겠습니다. 우리는 ` <Cat mouse={{x, y}}> ` prop을 통해 Cat 컴포넌트에 마우스 좌표를 전달해주고 화면에 어떤 위치에 이미지를 보여줄지 알려 주고자 합니다.
101
101
102
- 첫 번째 방법으로는, 다음과 같이 ` <Mouse> ` 컴포넌트의 * render 메서드안에* ` <Cat> ` 컴포넌트를 넣어 렌더링하는 방법이 있습니다:
102
+ 첫 번째 방법으로는, 다음과 같이 ` <Mouse> ` 컴포넌트의 * render 메서드안에* ` <Cat> ` 컴포넌트를 넣어 렌더링하는 방법이 있습니다.
103
103
104
104
``` js
105
105
class Cat extends React .Component {
You can’t perform that action at this time.
0 commit comments