[FE] React : State 와 Props 의 개념과 차이

State, Props : 데이터를 다룰 때 사용함

 

State란

 

컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트다.

컴포넌트 UI를 위한 데이터를 보관하는 오브젝트!

이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면?

리액트가 자동적으로 우리가 구현한 redner 함수를 호출한다.

 

=>자신이 들고 있는 값! 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용함!

 

 

Props란

컴포넌트 외부에서 데이터를 제공받음. 

컴포넌트의 재사용을 높이기 위해서! 상황에 따라 주어진 데이터를 제공받아서 그 데이터에 맞게 UI를 보여주기 위해 사용되어짐

-> 부모 컴포넌트에서 아래와 같이 컴포넌트를 사용할 때 title, onClick을 인자로 전달해줌.

그럼 얘네가 props 오브젝트로 묶어서 LikeButton 컴포넌트에 전달되어진다.

<LikeButton title={'Like'} onClick={this.handleClick} />

=> LikeButton 안에서 thos.props.title, this.props.onClick으로 각각 전달된 'Like'와 this.handleClick에 접근가능

 

 

 

 

codesandbox.io/embed/react-pin-input-forked-ujdv0?fontsize=14&hidenavigation=1&theme=dark"