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

296

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

예시 컴포넌트가 매우 간단해서 리팩터링이 힘들지 않았습니다. 하지만 실제 컴포넌트는 훨

씬 더 많은 코드로 구성되어 있어 리팩터링이 훨씬 더 어려울 수 있습니다.

컴포넌트를 리팩터링하는 동안 실수로 다른 동작을 변경하지 않도록 주의해야 할 뿐만 아니

라, 클래스 문법이 어떻게 작동하는지도 이해해야 합니다. 데이터 흐름을 변경하지 않고 컴

포넌트를 제대로 리팩터링하는 것은 꽤 어려운 일이 될 수 있습니다.

12.4.2

구조 변경의 필요성

여러 컴포넌트 간에 코드를 공유하는 일반적인 방법은 고차 컴포넌트 또는 렌더링

Props

패

턴을 사용하는 것입니다. 두 패턴을 사용해도 좋지만, 나중에 가서 이러한 패턴을 추가하려

면 애플리케이션의 구조를 변경해야 합니다.

컴포넌트가 클수록 이러한 구조 변경이 더 까다로워질 뿐만 아니라, 깊게 중첩된 컴포넌트

간에 코드를 공유하기 위해 여러 겹의 컴포넌트를 사용하다 보면 ‘래퍼 헬

wrapper

hell

’이라고 불

리는 상황에 빠질 수도 있습니다. 개발하면서 다음과 같은 구조를 보는 것이 드문 일은 아닙

니다.

<WrapperOne>

<WrapperTwo>

<WrapperThree>

<WrapperFour>

<WrapperFive>

<Component>

<h1>드디어 목표 컴포넌트!</h1>