기술 스택/React

Props Drilling은 반드시 지양해야 하는가?

없음 출신 2024. 11. 19. 12:48

리액트는 컴포넌트 기반의 라이브러리로, 사용자 인터페이스를 구축하는 데 매우 유용합니다. 리액트의 가장 큰 장점 중 하나는 상태 관리입니다. 상태 관리는 컴포넌트의 데이터 흐름을 관리하는 방법으로, 이를 통해 사용자 인터페이스를 동적으로 업데이트할 수 있습니다. 이번 포스트에서는 리액트의 상태 관리 패턴과 프롭 드릴링에 대해 자세히 알아보겠습니다.

React는 컴포넌트 기반으로 작동하며, 각 컴포넌트는 자신의 상태(state)와 부모 컴포넌트로부터 전달받은 속성(props)을 가집니다. state는 컴포넌트 내부에서 관리되는 데이터로, 사용자의 입력이나 API 호출에 따라 변할 수 있습니다. 반면, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 자식 컴포넌트는 이를 통해 뷰를 업데이트합니다.

상태 관리의 중요성

상태 관리는 리액트 애플리케이션에서 매우 중요한 요소입니다. 애플리케이션의 규모가 커질수록 여러 컴포넌트 간에 상태를 공유하고 관리해야 하는 경우가 많아집니다. 이때, 상태 관리가 복잡해지면 코드의 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 따라서, 효과적인 상태 관리 방법을 이해하고 적용하는 것이 중요합니다.

프롭 드릴링(Props Drilling) 이해하기

프롭 드릴링은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 중간에 있는 여러 컴포넌트를 거쳐야 하는 과정을 의미합니다. 예를 들어, 상위 컴포넌트에서 하위 컴포넌트 A와 B로 데이터를 전달할 때, 중간에 있는 컴포넌트 C와 D를 통해 전달해야 한다면, 이는 프롭 드릴링이라고 할 수 있습니다. 아래의 이미지는 프롭 드릴링의 개념을 잘 보여줍니다.

이미지 출처

프롭 드릴링은 데이터가 여러 계층을 거쳐 전달되기 때문에, 코드가 복잡해지고 관리하기 어려워질 수 있습니다. 특히, 중간 컴포넌트가 데이터를 전달하는 용도로만 사용된다면, 이는 코드의 비효율성을 초래할 수 있습니다.

프롭 드릴링의 문제점

프롭 드릴링의 가장 큰 문제는 코드의 가독성과 유지보수성을 저하시킨다는 점입니다. 중간 컴포넌트가 단순히 데이터를 전달하는 역할만 한다면, 해당 컴포넌트는 불필요하게 복잡해질 수 있습니다. 또한, 데이터의 흐름을 추적하기 어려워져, 버그가 발생할 가능성이 높아집니다. 아래 이미지는 리액트에서의 데이터 흐름을 보여줍니다.

이미지 출처

상태 관리 패턴: Provider 패턴

프롭 드릴링의 문제를 해결하기 위해, 상태 관리 패턴 중 하나인 Provider 패턴을 사용할 수 있습니다. 이 패턴은 React의 Context API를 활용하여, 데이터에 접근하려는 컴포넌트를 Provider로 감싸고, 필요한 데이터를 Context를 통해 전달하는 방식입니다. 이를 통해, 중간 컴포넌트를 거치지 않고도 여러 컴포넌트가 데이터에 접근할 수 있습니다. 아래 이미지는 상태 관리와 프롭 드릴링의 개념을 설명합니다.

이미지 출처

Provider 패턴을 사용하면, 데이터의 흐름이 단순해지고 코드의 가독성이 향상됩니다. 또한, 상태를 중앙에서 관리할 수 있어, 애플리케이션의 유지보수가 용이해집니다.

상태 관리 라이브러리 소개

위 사진처럼 React에서 상태 관리가 복잡해졌을 때 상태 관리를 단순화하는 방법으로 redux, recoil 같은 다양한 상태 관리 라이브러리나 패턴이 사용되고 있습니다. 이러한 라이브러리들은 상태를 중앙에서 관리할 수 있도록 도와주며, 프롭 드릴링의 문제를 효과적으로 해결할 수 있습니다. 예를 들어, Redux는 전역 상태 관리를 제공하여, 애플리케이션의 모든 컴포넌트가 필요한 데이터를 쉽게 접근할 수 있도록 합니다. 아래 이미지는 데이터 흐름을 보여주는 예시입니다.

이미지 출처

Recoil은 React의 상태 관리를 더욱 간편하게 만들어주는 라이브러리로, 상태를 원자 단위로 관리할 수 있습니다. 이를 통해, 필요한 컴포넌트만 리렌더링되도록 최적화할 수 있습니다.

개인적인 생각

'꼭 프롭 드릴링을 지양해야 하는가?'라는 질문에 저는 '그럴수도 있고 아닐수도 있다'라고 대답할 것 같습니다.

prop drilling의 장점

Prop drilling을 통해 값을 전달하는 방식은 어디서 데이터가 사용되는지 명확하게 보여줍니다. 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 더 명확하게 파악할 수 있습니다. 예를 들어, 특정 컴포넌트가 어떤 데이터를 필요로 하는지 쉽게 알 수 있기 때문에, 코드의 가독성이 높아집니다. 이는 특히 팀 프로젝트에서 여러 개발자가 함께 작업할 때 큰 장점으로 작용합니다.

값 추적 용이성

Prop drilling을 사용하면 값의 흐름을 쉽게 추적할 수 있습니다. 값이 어떤 컴포넌트를 거쳐 전달되는지를 알 수 있으므로 버그를 디버깅하거나 코드를 변경할 때 더욱 편리합니다. 예를 들어, 특정 값이 잘못 전달되었을 경우, 해당 값이 어떤 경로를 통해 전달되었는지를 쉽게 추적할 수 있습니다.

실제로 프로젝트를 하면서 3~4단계 계층까지는 프롭 드릴링을 사용해 기능을 구현하려고 했습니다. 수정이 필요한 코드를 빠르게 파악하고 유연하게 대처할 수 있었습니다.

결론 및 참고 자료

Prop drilling은 React 애플리케이션에서 데이터를 전달하는 중요한 방법이지만, 그 과정에서 발생할 수 있는 여러 단점도 존재합니다. 따라서 상황에 따라 Prop drilling을 적절히 활용하고, 필요할 경우 Context API나 상태 관리 라이브러리를 사용하는 것이 좋습니다. 이를 통해 더 효율적이고 가독성 높은 코드를 작성할 수 있을 것입니다.

링크

[1] velog - [React] Prop Drilling 이란 무엇이고, 어떻게 해결할 수 있을까? (https://velog.io/@rachel28/Prop-Drilling)

[2] velog - [React] 상태 관리 & Props Drilling (https://velog.io/@jungmin211/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Props-Drilling-od3x6r02)

[3] YouTube - [10분 테코톡] 프룬의 리액트 Props Drilling (https://www.youtube.com/watch?v=t-nR1SXK3o8)

[4] reactnext-central.xyz - 리액트 상태 관리: useState, useContext, useReducer 활용하기 (https://reactnext-central.xyz/blog/react/state-context-reducer)