[React] state vs props

State

state는 컴포넌트 안에서 내부적으로  데이터를 정의하는 오브젝트이다

 

컴포넌트 UI를 위한 데이터를 보관하는 오브젝트이며 state 업데이트를 통해 데이터가 변경되면 리액트가 자동적으로 render함수를 호출한다.

 

 

LikeButton Component - State

 

 

Props

 

props는 컴포넌트 밖에서 주어지는 데이터라고 한다

 

컴포넌트 안에서 데이터를 직접 정의하는 state와 달리 props는 외부에서 데이터를 제공받는다

 

props를 쓰는 근본적인 이유는 재사용률을 높이기 위함이며 상황에 따라 주어진 데이터를 그 데이터에 맞게 UI에 표기해준다.

 

LikeButton Component - Props

위와 같이 부모 컴포넌트에서 LikeButton 컴포넌트를 사용할 때 title 과 onClick이라는 아이들을 인자로 전달해주면 전달 받은 인자들은 props 오브젝트로 묶여서 LikeButton 컴포넌트에 전달된다

 

그렇게 되면 LikeButton 컴포넌트에서 this.props.title, this.props.onClick으로 각각 전달된 'Like'와 this.handleClick함수에 접근할수 있게 된다