props와 state 차이

 

 

 

React에서 props와 state는 컴포넌트의 데이터를 관리하는 두 가지 중요한 개념이다

각각은 다른 목적과 사용 방법을 가지고 있으며, 컴포넌트의 동작과 렌더링 방식을 결정하는 데 핵심적인 역할을 한다

 

Props

• 정의:
  • Props(속성)는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터다
  • Props는 컴포넌트를 구성하고 재사용하는 데 필요한 매개변수와 같다
• 불변성:
  • Props는 읽기 전용
  • 컴포넌트 내부에서 props의 값을 변경할 수 없다
  • 자식 컴포넌트는 전달받은 props를 그대로 사용하거나, 필요에 따라 props를 기반으로 다른 데이터를 생성할 수는 있지만, 직접 수정할 수는 없다
• 목적:
  • 다른 컴포넌트와의 상호작용을 통해 컴포넌트에게 값을 전달하고, 컴포넌트를 재사용할 수 있게 한다
  • Props는 컴포넌트의 외부 인터페이스를 정의한다

 

State

• 정의:
  • State는 컴포넌트의 상태를 나타내는 데이터로, 컴포넌트 내부에서 관리된다
  • State는 컴포넌트가 다루는 동적인 정보를 포함하며, 사용자의 인터랙션 또는 시간의 경과에 따라 변경될 수 있다
• 가변성:
  • State는 변경 가능하다
  • React에서는 this.setState() 또는 Hooks의 useState()를 통해 상태를 업데이트할 수 있으며, 상태가 변경되면 컴포넌트는 자동으로 다시 렌더링된다
• 목적:
  • 컴포넌트의 동적인 데이터를 관리하고, 사용자 인터랙션 또는 시스템 이벤트에 반응하여 UI를 업데이트한다
  • State는 컴포넌트의 내부 상태를 정의한다

 

비교

• 변경 가능성:
  • Props는 읽기 전용이며 변경할 수 없지만, State는 컴포넌트 내에서 변경 가능하다
• 소유권:
  • Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되며, 자식 컴포넌트는 props를 직접 변경할 수 없다
  • 반면, State는 컴포넌트 내부에서 선언되며, 컴포넌트 자체가 소유하고 관리한다
• 용도:
  • Props는 컴포넌트 간에 데이터를 전달하고, 컴포넌트의 재사용성을 높이는 데 사용된다
  • State는 컴포넌트의 동적인 데이터와 내부 상태를 관리하는 데 사용된다

 

props와 state는 React 컴포넌트를 구성하고, 동작시키는 데 있어 서로 보완적인 역할을 수행한다

적절히 사용함으로써, 유지보수가 쉽고 재사용 가능하며, 동적으로 반응하는 웹 애플리케이션을 구축할 수 있다