react state, props

State

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

 

컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출한다. 

import React from 'react';

class LikeButton extends Component {
	state = {
    	numberOfLikes: 0,
      };
      render() {
      	return <button>
        	{this.state.numberOfLikes}
            </button>;
            }
       }
       
 export default LikeButton;

 

Props

컴포넌트 밖에서 주어지는 데이터이다.

컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props는 컴포넌트 외부에서 데이터를 제공받는다. 가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서이다.

상황에 따라 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용되어진다.

 

아래처럼 부모컴포넌트에서 이렇게 LikeButton 컴포넌트를 사용할 때 title, onClick과 같은 아이들을 인자로 전달해주면 이 아이들이 props 오브젝트로 묶여서 LikeButton 컴포넌트에 전달되어 진다.

 

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

 

그래서 LikeButton 안에서 this.props.title, this.props.onClick 으로 각각 전달된 Like와 this.handleClick 함수에 접근할 수 있다.

 

전달된 인자들이 오브젝트로 묶여져서 LikeButton 컴포넌트 안에서 this.props로 할당되어 진다.

 

약간 함수 인자전달이라고 생각하면 조금 쉬움.