자바스크립트 + 리액트 디자인 패턴

293

Chapter 12_

리액트 디자인 패턴

12.3.3

장점

렌더링

Props

패턴을 사용하면 여러 컴포넌트 사이에서 로직과 데이터를 쉽게 공유할 수 있

습니다.

render

또는

children

prop

을 활용하여 컴포넌트의 재사용성을 높일 수 있습니다.

고차 컴포넌트 패턴 또한 재사용성과 데이터 공유 문제를 해결하는 데 주로 사용되지만, 렌

더링

Props

패턴은 고차 컴포넌트 패턴 사용 시 발생할 수 있는 몇 가지 문제를 해결할 수 있

습니다.

렌더링

Props

패턴은 고차 컴포넌트 패턴에서 발생할 수 있는 이름 충돌 문제를 해결합니다.

props

를 자동으로 병합하지 않고, 부모 컴포넌트에서 제공하는 값을 그대로 자식 컴포넌트

로 전달하기 때문입니다.

이렇게

props

를 명시적으로 전달함으로써, 고차 컴포넌트의 암시적인

props

문제를 해결할

수 있습니다. 요소에 전달해야 할

props

는 모두 렌더링

prop

의 인자 목록에 명확하게 나타

나므로, 어떤

props

가 어디에서 오는지 정확하게 파악할 수 있습니다. 또한 렌더링

prop

을

통해 애플리케이션 로직과 렌더링 컴포넌트를 분리할 수 있습니다. 렌더링

prop

을 통해 상

태를 가진 컴포넌트는 데이터를 상태를 가지지 않은 컴포넌트로 전달하고, 이 컴포넌트는 그

저 데이터를 렌더링하는 역할을 하게 됩니다.

12.3.4

단점

리액트

Hooks

는 렌더링

Props

패턴으로 해결할 수 있는 문제 대부분을 이미 해결했습니다.

Hooks

는 컴포넌트에 재사용성과 데이터 공유 기능을 추가하는 방식을 ...