[개발] React 에서 props와 state의 차이

안녕하세요 @realmankwon 입니다.

React에서 props와 state는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있습니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. props는 함수의 매개변수나 클래스형 컴포넌트의 this.props 객체를 통해 사용할 수 있습니다. props는 변경되지 않으며, 자식 컴포넌트에서 전달받은 데이터를 사용하여 렌더링합니다.

예를 들어, 부모 컴포넌트에서 props를 사용하여 자식 컴포넌트에 데이터를 전달할 수 있습니다.

function ParentComponent() {
  return (
    <ChildComponent prop1="value1" prop2="value2" />
  );
}

function ChildComponent(props) {
  return (
    <div>
      <p>Prop 1: {props.prop1}</p>
      <p>Prop 2: {props.prop2}</p>
    </div>
  );
}

state는 컴포넌트 내부에서 관리되는 변경 가능한 데이터입니다. state는 클래스형 컴포넌트에서 this.state 객체를 통해 사용할 수 있으며, setState() 메소드를 사용하여 변경할 수 있습니다. state의 변경은 render() 메소드를 트리거하고 UI를 업데이트합니다.

예를 들어, 클래스형 컴포넌트에서 state를 사용하여 데이터를 관리할 수 있습니다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

따라서, props는 읽기 전용 데이터를 전달하는 데 사용되며, state는 컴포넌트 내부에서 변경 가능한 데이터를 관리하는 데 사용됩니다.