• 목록
• 게시판 리스트 옵션
  • 검색

✅ 나는 왜 props drilling을 무시하다가 리팩터링 지옥을 봤나

상태 공유, 쉽게 시작하는 법

여러 컴포넌트를 거쳐 데이터를 전달하다 보면 이런 코드가 생긴다.

<Parent>
  <Child>
    <GrandChild user={user} />
  </Child>
</Parent>

이게 바로 props drilling.
한두 개일 땐 괜찮지만, 점점 깊어지면 구조가 꼬이고 수정이 힘들어진다.

✅ 해결 방법: Context로 직접 주입하기

// UserContext.tsx
const UserContext = createContext(null);
export const useUser = () => useContext(UserContext);

// 상위 컴포넌트
<UserContext.Provider value={user}>
  <GrandChild />
</UserContext.Provider>

// GrandChild 내부
const user = useUser();

필요할 때 직접 꺼내 쓰는 방식이 훨씬 깔끔하고 구조도 단순해진다.