JavaScript, TS

Props와 State의 차이

개발하는지호 2023. 12. 19. 20:12

 

 

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

 

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

 

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

 

 

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

 

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

 

 

 

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