React Forms와 State 끌어올리기

Forms - Controlled Component

HTML 폼 요소는 자체적으로 상태를 지닌다. React에서는 이 상태를 컴포넌트의 State로 관리하는 "Controlled Component" 패턴을 사용한다.

input, textarea, select 등의 값을 State로 관리하고onChange 이벤트로 State를 업데이트하는 방식이다. 이렇게 하면 폼 데이터의 "단일 진실 공급원(Single Source of Truth)"이 React State가 된다.

여러 input을 다룰 때는 각 input에 name 속성을 부여하고 하나의 핸들러에서 e.target.name으로 분기 처리할 수 있다.

Lifting State Up (State 끌어올리기)

두 개 이상의 컴포넌트가 같은 데이터를 공유해야 할 때 해당 State를 가장 가까운 공통 부모 컴포넌트로 올리는 패턴이다.

예를 들어, 섭씨 입력 컴포넌트와 화씨 입력 컴포넌트가 서로 연동되어야 한다면, 온도 State는 부모 컴포넌트에서 관리한다. 각 자식에게는 Props로 내려준다.

이 패턴의 핵심 원칙:

• State는 해당 데이터를 필요로 하는 컴포넌트들의 공통 부모에 위치시킨다
• 부모가 State를 소유하고 자식에게 값과 변경 함수를 Props로 전달한다
• 데이터는 항상 위에서 아래로 흐른다 (단방향 데이터 흐름)

정리하며

Lifting State Up은 React의 데이터 흐름을 이해하는 핵심이다. 나중에 상태 관리 라이브러리(Redux, Zustand 등)를 배울 때도 이 개념이 기반이 되니 확실히 이해하고 넘어가는 게 좋겠다.