Props Drilling을 피하는 더 나은 상태 관리 방법

들어가며

회원가입 성공 모달을 구현하면서 Props Drilling 이슈를 마주쳤고, 이를 해결하는 과정을 공유하고자 합니다.
Props Drilling을 피하고 더 효율적인 상태 관리 방법을 알아보겠습니다.

Props Drilling이란?

Props Drilling은 상위 컴포넌트에서 하위 컴포넌트로 props를 전달할 때, 중간에 있는 여러 컴포넌트들을 거쳐가야 하는 상황을 말합니다.

Props Drilling 예시

// 최상위 컴포넌트
const SignupScreen = () => {
  const handleModalClose = () => {
    // 모달 닫기 로직
  };

  return (
    <SignupStep2 onModalClose={handleModalClose} />
  );
};

// 중간 컴포넌트
const SignupStep2 = ({ onModalClose }) => {
  return (
    <LoginSuccessModal onClose={onModalClose} />
  );
};

// 최하위 컴포넌트
const LoginSuccessModal = ({ onClose }) => {
  return (
    <Modal onClose={onClose} />
  );
};

문제점

1. 코드 가독성 저하
2. 컴포넌트 재사용성 감소
3. 유지보수 어려움
4. 불필요한 리렌더링 발생 가능성

해결 방법: State Lifting

상태를 최상위 컴포넌트로 끌어올리고, 모달을 직접 렌더링하는 방식으로 변경했습니다.

const SignupScreen = () => {
  const [showSuccessModal, setShowSuccessModal] = useState(false);

  const handleModalClose = () => {
    setShowSuccessModal(false);
    // 네비게이션 로직
  };

  return (
    <SafeAreaView>
      <SignupStep2 /* 필요한 props만 전달 */ />
      <LoginSuccessModal 
        visible={showSuccessModal}
        onClose={handleModalClose}
      />
    </SafeAreaView>
  );
};

개선된 점

1. 상태 관리 중앙화

   • 모달 상태 관리가 한 곳에서 이루어짐
   • 상태 변경 로직이 명확해짐

2. Props Drilling 제거

   • 중간 컴포넌트들이 모달 관련 props를 전달할 필요가 없어짐
   • 컴포넌트 간 결합도 감소

3. 컴포넌트 재사용성 향상

   • SignupStep2 컴포넌트가 모달에 의존하지 않게 됨
   • 각 컴포넌트의 역할이 명확해짐

4. 유지보수성 향상

   • 모달 관련 로직이 한 곳에 모여 있어 수정이 용이
   • 네비게이션 로직도 함께 관리 가능

추가 고려사항

1. Context API 사용

   • 상태 공유가 더 복잡해진다면 Context API 고려
   • 전역 상태 관리의 필요성 검토

2. 컴포넌트 분리

   • 각 컴포넌트의 책임을 명확히 구분
   • 단일 책임 원칙 준수

결론

Props Drilling을 피하고 상태를 적절한 위치로 끌어올림으로써, 더 깔끔하고 유지보수하기 좋은 코드를 작성할 수 있습니다. 이는 React/React Native 개발에서 자주 마주치는 문제이며, 이러한 패턴을 이해하고 적용하는 것이 중요합니다.

앞으로도 비슷한 상황이 발생한다면, 먼저 상태가 어디에서 관리되어야 하는지 고민하고, Props Drilling을 최소화하는 방향으로 설계하는 것이 좋겠습니다.