React

Props·상태 소유권·Context와 조합

공유 데이터는 가장 가까운 공통 소유자에 두고 props나 컴포넌트 조합, Context로 전달합니다.

이럴 때 필요해요

중복 상태와 불필요한 전역화를 줄이고 컴포넌트 간 데이터 계약을 명확하게 유지합니다.

어떻게 동작하나요?

검색창에 입력한 글자를 검색 결과 목록에서도 써야 한다면, 그 글자 상태는 어디에 두어야 할까요? React에서는 데이터를 위에서 아래로 내려보내는 단방향 흐름을 사용합니다. 부모가 주는 읽기 전용 입력은 props이고, 컴포넌트가 직접 기억하고 바꾸는 값은 state입니다. 자식이 값을 바꾸고 싶을 때는 부모가 내려준 콜백 함수를 호출해 변경 의도를 알립니다.

두 자식이 같은 데이터를 함께 써야 한다면 가장 가까운 공통 부모로 state를 끌어올립니다(State Lifting). 이때 중간 컴포넌트들이 자신이 쓰지도 않는 props를 전달만 하는 props drilling이 부담스럽다면, 먼저 children으로 자식을 직접 조립하는 컴포넌트 조합(Composition)을 검토하고, 테마나 로그인 정보처럼 넓은 범위에 필요한 값에는 Context를 사용합니다.

Context는 깊은 하위 트리에 값을 곧바로 공급해 주는 전달 통로입니다. 하지만 그 자체로 상태 전이 규칙이나 부분 구독 최적화, 서버 캐시까지 다 해 주는 상태 관리 도구는 아닙니다. 자주 바뀌는 상태와 잘 바뀌지 않는 설정을 하나의 거대한 Context 객체에 한꺼번에 넣으면 하위 소비자들이 불필요하게 자주 다시 그려질 수 있으므로 관심사별로 나누어 설계합니다.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.jsx

function Parent() {
  const [name, setName] = useState('');
  return <NameInput value={name} onChange={setName} />;
}
function NameInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

jsx · 읽기 전용7줄

설명용 예제입니다. 입력창(NameInput)은 이벤트가 발생했을 때 새 문자열을 부모에게 알리기만 하고, 실제 상태의 소유권은 부모(Parent)에 남아 있습니다.

자주 헷갈리는 포인트

자식 컴포넌트에서 부모가 전달한 props 객체나 배열을 직접 수정하지 않습니다.
몇 단계의 props 전달을 피하겠다는 이유만으로 단순 지역 입력 상태까지 모두 전역 저장소로 올리지 않습니다.

내 말로 설명해 보기

Context나 전역 상태 라이브러리를 도입하기 전에 컴포넌트 조합(children)으로 props 전달 단계를 줄일 수 있는 경우는 언제인가요?

실전 시나리오에 적용해 보기

설계 상황목록을 정렬했더니 왜 내가 고른 좌석과 메모가 다른 줄에 붙을까요?React의 상태 스냅샷·업데이터 함수, 리스트 key 식별, 그리고 서버가 최종 확정하는 좌석 점유 권한을 구분해 설계합니다.설계 상황챗봇 답변이 스트리밍되는 도중에 다른 대화방으로 이동하면?스트리밍 청크(Chunk) 파싱, 대화방 전환 시 응답 격리, 생성 중단 처리와 XSS 방지 렌더링을 함께 설계합니다.

공식 참고 자료

← React

Props·상태 소유권·Context와 조합

이럴 때 필요해요

어떻게 동작하나요?

코드 예제

자주 헷갈리는 포인트

내 말로 설명해 보기

실전 시나리오에 적용해 보기

함께 읽으면 좋은 개념

관련 면접 질문 5개

React 상태의 위치와 관리 방식을 어떻게 정하나요?

Props drilling의 부담은 어떻게 줄이나요?

자식 컴포넌트는 부모에게 변경 의도를 어떻게 전달하나요?

공식 참고 자료