lifting state up(state 끌어올리기)이란 무슨 의미인가요?

Question

Accepted Answer

**Lifting state up(state 끌어올리기)**이란 여러 자식 컴포넌트가 동일한 데이터를 공유하고 동기화된 상태를 유지할 수 있도록, state를 자식 컴포넌트에서 **공통 부모**로 옮기는 것을 의미합니다. 형제 컴포넌트들이 조율해야 할 때 사용하는 표준 해결책입니다. ## 문제: 형제 컴포넌트가 공유 데이터를 필요로 함 ```jsx // ❌ 각 자식이 자신만의 state를 가짐 — 동기화 불가 function TempInput() { const [temp, setTemp] = useState(0); ... } // 두 형제 TempInput(섭씨 & 화씨)은 서로의 값을 볼 수 없음 ``` 두 형제 컴포넌트가 각각 관련 state의 복사본을 들고 있으면, 일관성을 유지할 방법이 없습니다. 하나를 바꿔도 다른 하나에 영향을 주지 못합니다. ## 해결책: state를 부모로 끌어올리기 ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state를 부모로 끌어올림 return ( <> {/* state를 prop으로 아래로 전달하고, 갱신용 setter도 전달 */}

두 입력이 하나의 값을 공유: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` 이제 공유 state는 부모(`Calculator`)에 존재합니다. 값을 prop으로 *아래로* 전달하고 setter도 전달하여 자식이 변경을 요청할 수 있게 합니다(*위로*). 이제 두 입력 모두 같은 출처를 반영하므로 하나를 수정하면 둘 다 갱신됩니다. ## 패턴 ```text 1. 공유가 필요한 컴포넌트들의 가장 가까운 공통 조상을 찾기 2. state를 그 조상으로 위로 옮기기 3. 값을 props로 아래로 전달하기 4. 자식이 갱신을 요청할 수 있도록 콜백을 아래로 전달하기(이벤트로 데이터 위로) ``` 이는 동일한 "데이터는 아래로, 이벤트는 위로" 흐름을 state 공유에 적용한 것입니다. ## 끌어올리기가 과도해질 때 ```text 너무 높이 끌어올리면(state가 사용되는 곳에서 멀어지면) → prop drilling이 됩니다. 그 시점에는 더 끌어올리는 대신 Context나 state 라이브러리를 선호하세요. ``` ## 왜 중요한가 Lifting state up은 컴포넌트 기반 프레임워크에서 **형제/관련 컴포넌트 간에 state를 공유**하는 근본 기법입니다. 공통 부모에 single source of truth를 유지하여 자식들이 동기화되게 합니다. Context나 store를 추가하기 전에 가장 먼저 손을 뻗는 도구인 경우가 많습니다. 언제 끌어올려야 하는지(형제들이 조율해야 할 때), 그리고 언제 끌어올리기가 과해졌는지(prop drilling을 유발하므로 Context/store를 쓸 때)를 인식하는 것이 컴포넌트 state를 잘 구조화하는 핵심입니다.