React 실무 - 상태관리와 Props Drilling

상태관리와 Props Drilling

props만으로 충분한가?

언제 상태관리를 도입해야 할까?

이번 뉴스레터에서는 "props drilling" 개념과 상태관리 도입 시점을 기준으로 실무적인 판단력을 키워봅니다.

✅ Props Drilling이란

"깊은 트리 구조에서 자식에게 값을 넘기기 위해 중간 컴포넌트들을 거쳐야 하는 현상"을 뜻합니다.

React에서는 상위 컴포넌트(부모)가 어떤 정보를 갖고 있을 때,

그 정보를 맨 아래에 있는 자식 컴포넌트에게 주고 싶을 수 있어요.

그런데 중간에 있는 여러 컴포넌트들이 사실 그 값을 필요로 하지 않아도,

그 값을 "중간 전달자" 역할로 계속 전달만 해야 해요.

App 컴포넌트가 userName이라는 정보를 갖고 있어요.
이걸 UserInfo에게 주고 싶어요.
하지만 구조상 Header를 지나가야만 UserInfo에게 갈 수 있어요.
그래서 Header는 그냥 props로 받아서 넘겨주는 역할만 하게 돼요.

📉 이런 상황을 "Prop Drilling (프롭 드릴링)"이라고 해요.

위 예시에서 UserInfo만 필요로 하는 name을 Layout과 Sidebar도 중간에서 받아 전달해야 합니다.

📌 이처럼 중간 컴포넌트들이 단순 전달자 역할만 하게 되면 유지보수가 어려워지고, 리팩토링 시 에러 발생 가능성이 높아집니다.

🛠️ 문제점은 뭘까요?

📌 중간 컴포넌트들이 단순 전달자 역할만 하게 되면요

❌ 유지보수가 어려워져요. → 중간에 컴포넌트가 추가/삭제되면 모든 전달 코드를 수정해야 해요.
⚠️ 리팩토링 시 에러가 발생할 가능성이 높아요. → 어떤 컴포넌트에서 어떤 값을 전달해야 하는지 헷갈리기 쉬워요.

🔥 상태관리 도입을 고려해야 할 상황

상황	설명
전역적으로 여러 컴포넌트에서 동일 데이터를 사용	로그인 정보, 테마 설정 등
이벤트에 따라 다수의 UI 컴포넌트가 함께 변해야 함	필터, 모달, 다크모드 등
props drilling이 너무 깊어졌을 때	중첩 3단계 이상이면 경고 신호

이와같은 상황, 해결책은?

→ 전역 상태 관리 도구!

값을 꼭 props로 전달하지 않아도, 필요한 컴포넌트에서 직접 꺼내 쓸 수 있도록 도와줘요.

⚖️ 상태관리 라이브러리 비교표

라이브러리	특징	난이도	추천 상황
React Context	React 기본 제공	⭐⭐	라이트한 상태 공유
Zustand	초간단 전역 상태	⭐	초심자, 미니 프로젝트
Recoil	상태 쪼개기, 의존성 관리 용이	⭐⭐⭐	중형 앱, 관계형 상태
Redux Toolkit	정형화된 대형 설계	⭐⭐⭐⭐	대규모 앱, 팀 작업
Jotai	직관적 원자 상태	⭐⭐	함수형 사고에 익숙할 때

🌱 실전 예시: Context로 테마 설정 공유하기

// ThemeContext.js
const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  return (
    
      {children}
    
  );
};

// 사용 컴포넌트
const Button = () => {
  const { theme } = useContext(ThemeContext);
  return ;
};

⚠️ Context는 자주 변경되는 값에선 렌더링 최적화에 주의해야 합니다.

⚙️ 실전으로 배우는 Zustand 사용법

Context의 한계를 보완할 수 있는 가장 쉬운 전역 상태 라이브러리

✅ 1단계: 설치하기

package.json에 "zustand"가 추가되어 있으면 OK!

node_modules/zustand/ 폴더가 생겼는지도 확인 가능!

npm install zustand

✅ 2단계: 전역 상태 만들기

코드	설명
create()	Zustand의 상태 생성 함수예요. 이 안에 상태와 함수를 정의해요.
theme: "light"	기본 테마를 "light"로 설정했어요.
setTheme()	테마를 바꾸고 싶을 때 사용하는 함수예요. 내부적으로 set()을 호출해 상태를 바꿔요.
useThemeStore()	상태를 사용하는 Hook이에요. 컴포넌트 안에서 const theme = useThemeStore(...) 이렇게 불러서 사용해요.

/ useThemeStore.js
import { create } from "zustand";

// 상태를 생성하는 Hook: useThemeStore
const useThemeStore = create((set) => ({
  theme: "light", // 초기 상태: light 모드
  setTheme: (newTheme) => set({ theme: newTheme }), // 테마를 변경하는 함수
}));

export default useThemeStore;

✅ 3단계: 사용하는 방법

코드	설명
useThemeStore((state) => state.theme)	상태에서 theme만 꺼내 옵니다.
useThemeStore((state) => state.setTheme)	setTheme 함수만 꺼내서 사용합니다.
theme === "light" ? "dark" : "light"	클릭할 때 테마를 토글(toggle)해요.
<div className={theme}>	테마에 따라 배경 스타일이 달라질 수 있게 처리할 수 있어요.

// Page.jsx
import useThemeStore from "./useThemeStore";

function Page() {
  // 상태 구독: 필요한 값만 가져오기
  const theme = useThemeStore((state) => state.theme);         // 현재 테마
  const setTheme = useThemeStore((state) => state.setTheme);   // 테마 변경 함수

  return (
    
      Hello!
      
    

  );
}

Zustand는 Provider 없이 상태 생성 가능하고,
필요한 상태만 구독해서 최적화에 강해요.
초심자도 쉽게 전역 상태를 만들고, 유지보수도 간단해집니다.

🧩 props vs 상태관리 도입 기준 요약

항목	props	상태관리
데이터 흐름 명확성	✅	✅
유지보수성	❌ (깊은 구조 시)	✅
코드 단순화	❌	✅
공통 데이터 공유	제한적	전역 가능
협업 확장성	낮음	높음

💡 실무 팁

props drilling은 무조건 피할 대상은 아닙니다.
상태관리는 처음부터 도입하기보단, Zustand → Context → Redux 순으로 도입을 고려하는 것이 좋습니다.

📝 마무리하며

props는 React의 기본이자 출발점이지만, 언제나 충분하지는 않습니다.

프로젝트가 커지고, 상태가 얽히기 시작할 때 우리는 더 나은 구조와 예측 가능한 흐름을 고민하게 됩니다.

이 뉴스레터가 여러분의 리팩토링 타이밍과 기술 선택에 도움이 되기를 바랍니다.

서정적 인류애를 전하는 라이프 인사이트 메뉴얼,

작업하실때 디스코드 많이 하시죠?

자 같이 소통하며 성장해봅시다!

소란했던 속마음도, 새로운 기술도, 함께 나누며 즐겁게 지내보면 어떨까요?

서로간의 배울것과 나눌 것, 진실된 이야기로 디지털 트랜스포메이션에 한걸음 다가가 보아요.

궁금해요! 마음챙김 앱의 AB test에 참여해주세요.

🌿 하나의 마음케어 앱, 두 가지 샘플링

🌿두 가지 샘플링으로 하나의 마음케어 앱을 만들어봤어요!

같은 목표를 가지고 있지만, 각 샘플링은 다른 방식으로 접근해봤어요!

프로토 타입으로 AB 테스트를 진행해봅니다.

샘플링1: 직관적 디자인으로 빠르게 마음을 다스리기

샘플링2: 실시간 피드백과 맞춤형 조언으로 웰니스 유도

어떤 샘플이 더 마음에 드시나요?여러분의 피드백은 큰 힘이됩니다 😍💬

1つのマインドケアアプリ、2つのサンプリング🌿。

二つのサンプリングで一つのマインドケアアプリを作ってみました！

同じ目標を持っていますが、それぞれのサンプリングは異なる方法でアプローチしています。サンプリング1: 直感的なデザインで素早く心を整えるサンプリング

2: リアルタイムのフィードバックとパーソナライズされたアドバイスで自己啓発を促します。

どちらのサンプルが好きですか？

皆様のフィードバックをお待ちしています！ 💬💬💬💬。

number 1

number2

Copyright NoticeAll content in this newsletter (text, images, design, etc.) is protected under copyright law. Unauthorized reproduction, distribution, modification, retransmission, or commercial use without the publisher's consent is strictly prohibited.For personal reference or sharing, please clearly attribute the original source.