Props와 State의 차이 및 렌더링 영향

React에서 props와 state는 둘 다 컴포넌트의 데이터를 관리하는 데 사용되지만, 몇 가지 중요한 차이가 있습니다.

Props:

1. 읽기 전용(Read-Only):

   • props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. 자식 컴포넌트는 props를 읽기만 할 수 있으며, 직접 수정할 수 없습니다.

2. 외부로부터 전달:

   • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 외부에서 전달되기 때문에 자식 컴포넌트에 의해 변경되지 않습니다.

3. 함수형 및 클래스형 모두에서 사용:

   • props는 함수형 컴포넌트와 클래스형 컴포넌트에서 모두 사용할 수 있습니다.

4. 기본값 설정 가능:

   • props에는 기본값을 설정할 수 있습니다.

// 부모 컴포넌트에서
<MyComponent name="John" />

// 자식 컴포넌트에서
const MyComponent = (props) => {
  return <p>Hello, {props.name}!</p>;
};

State:

1. 컴포넌트 내부에서 관리:

   • state는 컴포넌트의 내부에서 관리되며, 컴포넌트 내부에서 변경이 가능합니다.

2. setState로 업데이트:

   • state는 this.setState() 메소드를 통해 업데이트되어야 합니다. 직접적으로 this.state를 변경해서는 안됩니다.

3. 클래스형 컴포넌트에서만 사용:

   • state는 주로 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

4. 초기값 설정 필수:

   • state를 사용하기 전에 반드시 초기값을 설정해야 합니다.

// 클래스형 컴포넌트에서
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

렌더링 영향:

1. Props:

   • props가 변경되어도 해당 컴포넌트는 다시 렌더링됩니다.
   • shouldComponentUpdate 메소드나 React.memo를 사용하여 성능 최적화를 수행할 수 있습니다.

2. State:

   • state가 변경되면 해당 컴포넌트가 리렌더링됩니다.
   • shouldComponentUpdate 메소드, React.PureComponent, 혹은 함수형 컴포넌트에서는 React.memo를 사용하여 불필요한 리렌더링을 방지할 수 있습니다.

상태(state)는 주로 컴포넌트 내부의 동적인 데이터를 관리하고, 속성(props)은 외부에서 컴포넌트에 데이터를 전달하는 데 사용됩니다. 이들을 올바르게 사용하면 React 컴포넌트를 효과적으로 설계하고 상태 관리를 할 수 있습니다.