[React] Props vs State 차이 비교 / 예제

리액트의 대표 필수 개념이지만 혼동되기 쉬운 props와 state의

차이를 간단한 예제를 기준으로 이해해보도록 하겠습니다.

 

 

Props

props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며,

읽기 전용으로 자식 컴포넌트에서는 수정이 불가능합니다.

 

코드에서 사용되는 방식의 예시 코드 스니펫은 다음과 같습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="Jimmy" />;
}

 

App 컴포넌트는 Welcome 컴포넌트에 name이라는 prop을 전달할 것입니다.

Welcome 컴포넌트는 이 prop을 사용하여 동적으로 데이터를 렌더링하게 됩니다.
최종 출력 결과는 Hello, Jimmy 텍스트가 h1 태그로 등장할 것입니다.

 

 

State

state는 컴포넌트의 속성이나 상태를 관리하는 데 사용되는데요.

주로 컴포넌트 내부에서 변경될 수 있는 데이터를 다룰 때 사용됩니다.

state의 변경은 컴포넌트의 재렌더링을 유발하므로, 불필요한 변경이 되지 않게 신경써야 합니다.

 

간단한 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>
    );
  }
}

 

위의 예시에서 Counter 컴포넌트는 state를 사용하여 카운트 값을 관리합니다.

사용자가 버튼을 클릭할 때마다 카운트 값이 증가하며,

이는 setState 메서드를 통해 state를 업데이트함으로써 이루어지게 됩니다.

 

반응형

 

Props vs State 동시 사용 예제

props와 state가 동시에 사용된 예제를 통하여 좀 더 명확한 이해를 해보겠습니다.

 

아래의 예제에서는 이름인 name은 props로, 나이인 age는 state로 관리되는

컴포넌트의 예시입니다.

(엘리먼트 생성 시 나이는 기본 20으로 생성되며, 나이를 증가시키면 재랜더링됩니다.)

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    // 초기 state 설정: age를 20으로 설정
    this.state = {age: 20};
  }

  // 나이를 증가시키는 메서드
  increaseAge = () => {
    this.setState(prevState => ({
      age: prevState.age + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Welcome, {this.props.name}!</h1>
        <p>Your age: {this.state.age}</p>
        <button onClick={this.increaseAge}>Increase Age</button>
      </div>
    );
  }
}

function App() {
  return <UserProfile name="John Doe" />;
}

 

이름은 엘리먼트 선언 후에 변경이 안되지만 나이는 1씩 계속 증가시킬 수 있다는 점에

주목해주시면 차이점 이해가 더 수월할 것입니다.

 

 

Props vs State 차이점 요약

마지막으로, props와 state의 차이점을 간략하게 요약해보면 다음과 같습니다.

 

• Props:
  • 부모 컴포넌트로부터 전달받은 데이터
  • 읽기 전용, 자식 컴포넌트에서 수정 불가
  • 컴포넌트의 재사용성을 높이기 위해 사용

 

• State:
  • 컴포넌트 내부에서 관리되는 데이터
  • 컴포넌트의 상태 변경을 위해 사용
  • setState를 통해 업데이트 가능
  • 값 변경 시 재랜더링 유발