[React] State, Props

State

컴포넌트의 UI를 위한 데이터를 보관하는 오브젝트
해당 컴포넌트가 동적으로 표시될 데이터를 상태(state)로 저장하여 관리하기 위한 리액트의 문법이다.
state에 관리되는 데이터가 업데이트가 발생하면 render()함수를 자동으로 호출한다.
또한, state의 값을 변경하기 위해서는 직접 접근하는것이 아닌 리액트에서 제공되는 setState()메서드를 이용하여 상태를 변경해야지만 render()함수가 자동으로 호출된다.

class Count extends Component {
  constructor(props) {
    super(props);
    // 컴포넌트의 데이터 관리를 위한 state
    this.state = {
      count: 0,
    }
  }
  // arrow function을 이용하면 메서드를 바인드 안해줘도 된다.
  handlePlus = () => {
    this.setState({
      count: this.state.count + 1,
    }
  }

  render = () => ( 
    <>
    //state에서 관리되는 count를 가져와 화면에 뿌려줌
      <span>{this.state.count}</span>
      <button onClick={this.handlePlus}>+</button>
	</>
  )
}

Props

State가 컴포넌트에서 관리하는 데이터라고한다면,
Props는 컴포넌트의 외부에서 주어지는 데이터라고 볼수 있다.

이런 데이터의 흐름이 생긴 이유는 컴포넌트의 재사용성이 가장 크다고 생각한다. 유동적으로 상황에 따라 주어진 값에 따라 UI를 만드는게 효율적이라고 생각하기 때문이다.

//외부에서 받아온 데이터를 담은 props
function Count(props) { // 혹은 구조분해로 { count }로 받아줘도 됨
  return <span>{props.count}</span>
}