React [state, props]

생성자(constructor)의 매개변수와 상태는 둘 다 어떤 종류의 데이터를 저장하긴 하지만, 그 사용 방법과 목적이 다릅니다.
생성자의 매개변수는 객체가 처음 생성될 때 초기 설정값을 제공하고,
state(상태)는 애플리케이션의 생명 주기 동안 변화할 수 있는 동적 데이터를 관리합니다.

React에서 props는 컴포넌트가 받는 입력값이라고 볼 수 있으며, 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하는 방법입니다. 그러나 props는 단지 생성자 내부의 초기 선언값을 저장하는 데 사용되는 것은 아닙니다.

객체 지향 프로그래밍에서 생성자의 매개변수는 인스턴스가 처음 생성될 때 그 값을 설정하는데 사용됩니다. 그에 반해 React 컴포넌트의 props는 컴포넌트의 재사용성을 증가시키고 데이터를 하위 컴포넌트로 전달하는 역할을 합니다.

예를 들어, 다음과 같은 React 컴포넌트가 있다고 가정해 봅시다

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

여기서 name은 Welcome 컴포넌트에 전달되는 props입니다. 다른 부모 컴포넌트에서 Welcome 컴포넌트를 사용하면서 다양한 name 값을 전달할 수 있습니다.

<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />

이렇게 각기 다른 props를 전달함으로써, 같은 Welcome 컴포넌트를 재사용하면서도 각기 다른 결과를 얻을 수 있습니다.

따라서 props는 생성자의 매개변수와는 다르게, 컴포넌트의 입력값으로서 동작하며 컴포넌트의 재사용성을 증가시키는 역할을 합니다. 그리고 중요한 점은, props는 read-only로, 컴포넌트 자체에서는 props의 값을 변경할 수 없다는 것입니다. 이러한 변경 불가능성은 React의 데이터 흐름이 단방향적인(unidirectional) 이유 중 하나입니다.