[Tech] Props Drilling & 전역 상태 관리

Props drilling이란 무엇인가?

• Props drilling은 부모 컴포넌트에서 자식 컴포넌트로 props를 넘겨줄 때,
  중첩된 자식 컴포넌트로 계속 넘겨 주면서 전달하는 형태다.

Props drilling 장점

• 명시적인 값을 사용하여, 어떤 props를 받았는지 확인 가능
• 값이 어떤 흐름으로 전달되는지 확인 가능
• 코드가 바뀌는 점을 쉽게 파악 가능

Props drilling 딘점

• props 데이터 타입 변경 시, 관련 컴포넌트 모두를 변경해야 함
• 중간 컴포넌트에 불필요한 props를 전달하게 됨
• 누락된 props 확인이 어려움.
• 다음 예시 그림과 같이, 컴포넌트 1에서 컴포넌트 n으로 넘겨줄 때,
  컴포넌트 구조로 인해 불필요하게 중간 컴포넌트로 넘겨주면서 코드가 복잡해진다.
  

따라서, Props drilling을 남발하는 것은 구조가 복잡해지고, 유지보수가 어려워진다.

Props drilling 해결책

props를 전역적으로 관리하여 사용하는 방법이 해결책!

---

전역 상태 관리 방법

1. React의 Context API 사용

• Context 객체를 만드는 함수

import { createContext } from 'react';

const 컨텍스트객체명 = createContext(초기값);

2. 별도의 전역 상태 관리 라이브러리 사용

• Redux의 Toolkit
• Rocil
• Zustand

---

✨ 출처

프론트엔드 기술 면접 질문
Blog, [React] Prop Drilling 이란 무엇이고, 어떻게 해결할 수 있을까?

---