저장했는데 왜 화면이 바로 안 바뀌었을까?

Props Drilling이란?

부모 컴포넌트의 데이터를 여러 단계의 자식 컴포넌트에 props로 계속 전달해야 하는 상황으로, 컴포넌트 구조가 깊어질수록 유지보수가 어려워집니다.

해결 방법

상태를 적절한 위치로 끌어올리고(State Lifting), 컴포넌트 책임을 명확히 분리했습니다.

// Before: 중간 컴포넌트가 불필요하게 props를 전달
function Parent() {
  const [items, setItems] = useState([]);
  return ;
}
// After: Context나 prop 구조 개선으로 단순화
const ItemContext = createContext(null);

배운 점

컴포넌트 설계 시 상태의 위치(ownership)가 중요

단순한 경우에는 State Lifting이 Context보다 효과적

컴포넌트 분리 기준: 단일 책임 원칙