React의 state와 props

면접에서 “React의 state와 props에 대해 설명해 주세요.”라는 질문이 자주 나옵니다. 두 개념을 나눠서 정리해 보겠습니다.

React란?

React는 JavaScript 기반의 사용자 인터페이스(UI) 라이브러리로, 컴포넌트 기반의 개발을 지원합니다. React에서 컴포넌트는 상태(state)와 속성(props)을 사용하여 동적인 UI를 생성합니다.

상태는 React 컴포넌트 내에서 관리되는 데이터입니다. 각 컴포넌트는 자체적인 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링되는 동안 변할 수 있습니다.

클래스 컴포넌트에서는 state 속성으로 정의하고 setState() 메서드로 업데이트하며, 함수 컴포넌트에서는 useState 훅을 사용합니다.
상태의 변경은 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다.
상태는 컴포넌트 내에서 로컬하게 유지되므로 다른 컴포넌트에는 직접 영향을 주지 않습니다.

속성은 부모 컴포넌트로부터 자식 컴포넌트에 전달되는 데이터입니다.

state는 컴포넌트가 내부에서 관리하는 변경 가능한 데이터로 변경 시 리렌더링을 유발하고, props는 부모가 자식에게 전달하는 읽기 전용 데이터입니다. state는 내부 상태 관리, props는 컴포넌트 간 데이터 전달에 사용됩니다.