Props Drilling
주제 선정 이유?
프로젝트에 필요한 redux toolkit에 대해 공부하다가, 상태관리가 등장한 배경에 대해서 궁금해져서 조사하게 되었다.
학습 목표
props drilling은 무엇이고 어떻게 피할 수 있는지에 대해 학습한다.
Props Drilling이란
Props Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.
Props Drilling의 장점
•
컴포넌트 간에 데이터를 전달하는 가장 쉽고 빠르게 전달할 수 있다.
•
(작은 규모의 어플리케이션에서) 컴포넌트를 잘게 분할해서 Props drilling을 통해 전달하면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤 데이터가 어디서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이하다
그렇다면 Props Drilling이 문제인 이유는 무엇인가?
어플리케이션의 규모가 커지고, 중간 컴포넌트의 수가 많아지게 되면서 불필요한 props 전달로 인해 유지보수도 어렵고 가독성도 떨어질 수 있다.
•
필요보다 많은 props를 전달하다가, 컴포넌트를 분리하는 과정에서 필요하지 않은 props가 계속 남거나 전달되는 문제
•
props 전달이 누락되었는데 defaultProps가 과용되었을 때, props가 전달되지 않은 상황을 인지하기가 어려운 문제
자세한 설명
•
props의 이름이 전달 중에 변경되어서 데이터를 추적하기 쉽지 않게되는 문제
자세한 설명(ChatGPT)>> Props Drilling을 사용하면서 props의 이름이 중간 컴포넌트를 거치면서 변경되는 경우를 의미한다. 이는 props의 이름이 상위 컴포넌트에서 하위 컴포넌트로 전달되는 동안 수정되거나 재정의되어 데이터의 추적이 어려워지는 상황을 말한다.예를 들어, 상위 컴포넌트에서 하위 컴포넌트로 value라는 이름의 props를 전달한다고 가정해보자. 하지만 중간 컴포넌트에서 value를 받은 후 다른 이름으로 변경하거나 다른 컴포넌트에 전달할 수 있다. 이 경우 하위 컴포넌트에서는 원래 props 이름이 무엇이었는지 추적하기 어려워지고, 코드를 분석하거나 디버깅하기 어려워진다.이러한 상황에서는 코드의 가독성과 유지보수성이 저하될 수 있다. 특히 프로젝트가 커지고 여러 컴포넌트가 복잡하게 얽혀있을 때, props 이름의 변경이 제대로 추적되지 않으면 버그를 찾기 어려워진다.
그렇다면 이러한 Props Drilling으로 생기는 문제 피하는 방법은?
1) 렌더링 될 컴포넌트를 불필요하게 여러 컴포넌트로 나누지 않는다.
React는 (권장되지는 않지만)단 하나의 컴포넌트에 어플리케이션 전체를 작성하더라도 기술적인 제약은 없다. 따라서 성급하게 불필요한 컴포넌트 쪼개기를 할 필요는 없다. 컴포넌트를 재사용해야할 상황을 기다렸다 분할해도 늦지 않으며, 불필요한 prop drilling도 하지 않을 수 있다.
2) defaultProps를 필수 컴포넌트에 사용하지 않는다.
defaultProps를 사용하면 컴포넌트가 제대로 동작하기 위해 꼭 필요한 props가 전달되지 못한 상황에도 중요한 오류가 가려지게 된다. 따라서 defaultProps를 필수적이지 않은 컴포넌트에만 사용하면 prop drilling으로 인한 문제를 막을 수 있다.
3) 가능한 관련성이 높은 곳에 state를 위치 시킨다.
어떤 데이터가 어플리케이션의 특정 위치에서만 필요하다면 최상위 컴포넌트에 state를 위치시키는 것보다 해당 데이터를 필요로 하는 최소 공통 부모 컴포넌트에서 관리를 하는 것이 가장 효율적이다.
4) 상태관리 도구를 사용한다.
데이터를 필요로 하는 컴포넌트가 정말 깊숙히 위치하고 있다면, React에서 제공하는 Context API를 사용하거나 Redux 등의 외부 상태관리 라이브러리를 사용해서 문제를 해결할 수 있다. 물론 어플리케이션의 모든 곳에서 이와 같은 도구를 사용해야하는 것은 아니지만, 비교적 손쉽게 문제를 해결할 수 있다.
Context API
React에 내장되어 컴포넌트 트리 전체에 데이터를 제공할 수 있는 API이다.
장점
•
Redux는 무겁고 복잡한 라이브러리이다. 따라서 상태관리가 아닌 단순히 props를 전달할 목적이라면 context API를 사용하는 것이 적절하다.
단점
•
Context API에서 상태값이 변경되면, provider로 감싼 모든 자식 컴포넌트가 리렌더링이 된다. 리렌더링은 성능에 영향을 미칠 수 있기 때문에 때문에 자식 컴포넌트의 불필요한 리렌더링을 방지해야한다.
Redux
오픈 소스 자바스크립트 라이브러리로 state를 사용해 애플리케이션의 전역 상태 관리를 위해 사용한다.
장점
•
단방향 데이터 통신이 발생하기 때문에 데이터 흐름을 예측할 수 있고 디버깅에 유리하다.자세한 설명(ChatGPT)>> Redux는 상태 관리 라이브러리로서, 애플리케이션의 데이터를 중앙 집중적으로 관리하고 상태 변화를 예측 가능한 방식으로 처리한다. 이는 단방향 데이터 흐름을 갖는 아키텍처를 채택하여 데이터의 변화를 추적하고 예측하기 쉽게 만든다.단방향 데이터 흐름은 데이터의 이동 경로가 일정하고 예측 가능하다는 의미이다. Redux에서는 데이터의 흐름이 "액션 → 리듀서 → 상태"의 단방향으로 이루어진다. 액션은 상태 변화에 대한 정보를 담은 객체이며, 리듀서는 액션을 기반으로 상태를 업데이트하는 순수 함수이다. 이러한 단방향 흐름으로 인해 데이터의 변화가 어떤 경로를 따라가는지 예측할 수 있고, 디버깅 시 데이터 변화를 추적하기 용이하다.
단점
•
무겁고 사용하기에 복잡하다.(이를 보완하기 위해 redux toolkit 등의 라이브러리가 등장하였다.)
면접: Props drilling은 무엇이고 어떻게 피할 수 있는가?
Props Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.
이는 컴포넌트 간에 데이터를 전달하는 가장 쉽고 빠르게 전달할 수 있다는 장점이 있다. 하지만 어플리케이션의 규모가 커지고, 중간 컴포넌트의 수가 많아지게 되면서 불필요한 props 전달로 인해 유지보수도 어렵고 가독성도 떨어질 수 있다.
이를 피하기 위해 컴포넌트를 리팩토링하고, 컴포넌트를 더 작은 컴포넌트들로 쪼개지 않고, state를 가장 가까운 부모 컨포넌트와만 공유함으로써 props drilling 회피할 수 있습니다. 위계상 멀리/깊게(deep/far)떨어진 컴포넌트와 state를 공유할 때, React의 Context API 혹은 Redux와 같은 state 관리 라이브러리를 사용할 수 있습니다.
참고 사이트:
