React에서의 props drilling 이해 및 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자 및 중간 이상의 컴포넌트 구조를 다루는 개발자

핵심 요약

• props drilling은 중간 컴포넌트가 데이터를 사용하지 않음에도 불구하고 부모에서 자식으로 계속 전달하는 패턴으로, 코드 유지보수성 저하 및 성능 문제를 유발
• React Context API는 중간 컴포넌트를 거치지 않고 직접 데이터를 공유할 수 있는 대안 제공
• Redux, Zustand, Recoil 같은 상태 관리 도구는 대규모 앱에서 props drilling을 효과적으로 해결

섹션별 세부 요약

1. props drilling의 정의 및 예시

• props drilling은 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 시 중간 컴포넌트가 데이터를 사용하지 않음에도 불구하고 전달하는 현상
• 예시: App → Parent → Child → GrandChild 구조에서 GrandChild만 user 데이터를 필요로 하지만, 중간 컴포넌트(Parent, Child)도 user prop을 전달받음
• 코드 예시: GrandChild({ user })에 user prop이 중간 컴포넌트를 거쳐 전달됨

2. props drilling의 문제점

• 유지보수성 저하: 데이터 구조 변경 시 여러 컴포넌트를 수정해야 함
• 코드 불필요한 복잡성: 중간 컴포넌트에 불필요한 props가 추가되어 가독성 저하
• 성능 저하: prop 변경 시 체인 상의 모든 컴포넌트가 리렌더링됨

3. props drilling 해결 방법

• React Context API 사용: createContext()로 데이터 공유, 중간 컴포넌트를 거치지 않고 GrandChild에서 useContext()로 직접 접근 가능
• 상태 관리 도구 사용: Redux, Zustand, Recoil 등은 중앙 집중식 상태 관리로 props drilling을 완화
• 예시 코드:

```jsx

const UserContext = React.createContext();

function GrandChild() {

const user = useContext(UserContext);

return

Hello, {user}!

}

```

결론

• 작은 규모의 앱에서는 React Context API를 사용해 props drilling을 해결하고, 대규모 앱에서는 Redux 같은 상태 관리 도구를 도입하는 것이 효과적
• props drilling은 문제 자체가 아니라 상태 관리 방식의 개선 필요성을 시사함