Skip to content
Closed
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
2c0c6e6
translate hoc
gnujoow Nov 12, 2019
b1ce3e8
Merge branch 'master' into hoc
gnujoow May 14, 2020
d73430d
Update higher-order-components.md
gnujoow May 17, 2020
e201cb1
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
bb618ac
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
e5f492b
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
171e856
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
bd6cc96
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
4576ce0
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
875d00e
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
89e651e
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
6a89704
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
11f81a4
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
b26958a
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
a62d9c1
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
0294a0c
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
a541729
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
6628d0a
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
aa529f1
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
593a091
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
0dedf86
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
46999ef
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
f77be2c
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
cecb0f8
Update content/docs/higher-order-components.md
gnujoow Jul 23, 2020
7431ba9
Apply suggestions from code review
gnujoow Jul 23, 2020
9cd82e4
Merge branch 'master' into hoc
hg-pyun Sep 7, 2020
ecbd21a
Update content/docs/higher-order-components.md
gnujoow Oct 7, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Apply suggestions from code review
Co-authored-by: Taehwan Noh <taehwanno.dev@gmail.com>
  • Loading branch information
gnujoow and taehwanno authored Jul 23, 2020
commit 7431ba963cba930e6319a55a4d501615762671b6
10 changes: 5 additions & 5 deletions content/docs/higher-order-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ function withSubscription(WrappedComponent, selectData) {
## 원본 컴포넌트를 변환하지마세요. Composition을 사용하세요.
. {#dont-mutate-the-original-component-use-composition}

고차 컴포넌트 내부에서 컴포넌트의 프로토타입을 수정(또는 변형)하지 않도록 합니다.
고차 컴포넌트 내부에서 컴포넌트의 프로토타입을 수정(또는 변경)하지 않도록 합니다.

```js
function logProps(InputComponent) {
Expand All @@ -187,7 +187,7 @@ function logProps(InputComponent) {
return InputComponent;
}

// EnhancedComponent 는 props를 받을때 마다 log를 남깁니다.
// EnhancedComponent 는 props를 받을 때 마다 log를 남깁니다.
const EnhancedComponent = logProps(InputComponent);
```

Expand All @@ -212,13 +212,13 @@ function logProps(WrappedComponent) {
}
```

위 고차 컴포넌트는 충돌 가능성을 피하면서 변형 버전과 동일하게 작동합니다. 이 방법은 클래스 컴포넌트와 함수형 컴포넌트에서도 동일하게 작동합니다. 그리고 순수한 함수이기 때문에 다른 고차 컴포넌트와 같이 구성하거나 심지어 자체적으로 구성할 수 있습니다.
위 고차 컴포넌트는 충돌 가능성을 피하면서 프로토타입을 직접 변경하는 버전과 동일하게 작동합니다. 이 방법은 클래스 컴포넌트와 함수형 컴포넌트에서도 동일하게 작동합니다. 그리고 순수한 함수이기 때문에 다른 고차 컴포넌트와 같이 조합하거나 심지어 자체적으로 조합할 수 있습니다.

고차 컴포넌트와 컨테이너 컴포넌트 라 불리는 패턴이 유사함을 느꼈을 수 있습니다. 컨테이너 컴포넌트는 high-level과 low-level의 관심사를 분리하는 전략의 일부입니다. 컨테이너는 구독 및 state 같은 것을 관리하고 UI 렌더링같은 것을 처리하는 컴포넌트에 props를 전달합니다. 고차 컴포넌트는 컨테이너를 그 구현체 중 일부에 사용하고있습니다. 고차 컴포넌트는 파라미터화된 컨테이너 컴포넌트 정의로 생각할 수 있습니다.
고차 컴포넌트와 컨테이너 컴포넌트라 불리는 패턴이 유사하다고 느낄 수 있습니다. 컨테이너 컴포넌트는 high-level과 low-level 관심사를 분리하는 전략의 일부입니다. 컨테이너는 구독 및 state 같은 것을 관리하고 UI 렌더링 같은 것을 처리하는 컴포넌트에 props를 전달합니다. 고차 컴포넌트는 컨테이너를 그 구현체 중 일부에 사용하고 있습니다. 고차 컴포넌트는 매개변수화된 컨테이너 컴포넌트 정의로 생각할 수 있습니다.

## 컨벤션: 래핑된 컴포넌트를 통해 관련없는 Props 전달하기 {#convention-pass-unrelated-props-through-to-the-wrapped-component}

고차 컴포넌트는 컴포넌트에 기능을 추가합니다. 고차 컴포넌트는 맺음(contract)을 과감하게 변경해서는 안됩니다. 고차 컴포넌트는 반환된 컴포넌트에서는 래핑된 컴포넌트와 비슷한 인터페이스가 있어야합니다.
고차 컴포넌트는 컴포넌트에 기능을 추가합니다. 고차 컴포넌트는 계약을 과감하게 변경해서는 안됩니다. 고차 컴포넌트에서 반환된 컴포넌트는 래핑된 컴포넌트와 비슷한 인터페이스가 있어야합니다.

고차 컴포넌트는 특정 관심사와 관련이 없는 props를 활용해야 합니다. 대부분의 고차 컴포넌트에는 다음과 같은 렌더링 메서드가 포함되어있습니다.

Expand Down