React 컴포넌트 계층 구조 리팩토링을 통한 Prop Drilling 제거

React 프론트엔드 개발에서 Prop Drilling은 컴포넌트 계층 구조의 여러 레벨에 걸쳐 컴포넌트 속성(properties)을 통해 데이터를 전파하는 관행입니다. React 문서에서는 지양되고 있으며, 최근 연구에서는 코드 스멜(code smell)로 특징지어지고 있음에도 불구하고, 그 만연도, 복잡성, 그리고 자동 리팩토링 가능성에 대해서는 알려진 바가 거의 없습니다. 본 논문에서 우리는 React 코드베이스 내의 Prop Drilling 인스턴스를 식별하는 정적 분석 방법과 Context API 및 컴포넌트 합성(Component Composition)을 기반으로 하는 두 가지 자동 리팩토링 전략을 사용하여 이를 제거하는 방법을 제안합니다. 제안된 방법은 Node.js 명령줄 도구인 ReactRefactor로 구현되었으며, 오픈소스 React 애플리케이션 벤치마크 데이터셋에 대해 경험적으로 평가되었습니다. 경험적 평가의 주요 결과는 (a) 프로젝트 크기에 관계없이 벤치마크 프로젝트 전반에서 Prop Drilling이 빈번하게 발생한다는 것; (b) 여러 속성(properties)을 동시에 같은 경로를 따라 전달하는 데서 발생하는 더 일반적인 복잡성과 대비하여, 데이터 전파 깊이 측면에서는 일반적으로 낮거나 중간 정도의 복잡성을 가진다는 것; 그리고, (c) Context API로 리팩토링함으로써 Prop Drilling의 상당한 부분(76.3%)을 자동적으로 제거할 수 있는 잠재력이 있다는 것을 보여줍니다.