리액트 컴포넌트에서 다루는 데이터는 props 와 state로 구성된다.
props는 직접 수정이 불가능 한 반면 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.

1. State

: 스테이트란 해당 컴포넌트에서 사용되어지는 값의 상태를 의미한다.
컴포넌트 내에서 변수처럼 사용되어지며 이 스테이트 값이 변경되면 리액트는 해당 컴포넌트를 재랜더링하게 된다.
즉, 스테이트값의 변화에 따라 화면이 바뀐다고 생각하면 되겠죠?

1) state 선언

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
    }
  }
}

• 클래스형에서는 다음과 같이 선언하여 state를 사용할 수 있다.

2) state 변경(setState)

: state는 변수를 변경하는 방법처럼 변경할 수 없고 그 내부 함수로만 변경이 가능하다.

  state = 'ash'

• 이런 방법으론 변경이 되지 않는다.

this.setState({
  name: 'ash'
})

• 이렇게 setState라고 하는 내장 함수를 이용해야만 수정이 가능하다.

3) state 불러오기

: state는 값으로 사용할 수 있다.

this.state.name

• 이렇게 state를 직접 불러올 수 있다.

2. Props

: 프롭스란 부모 컴포넌트에서 자식 컴포넌트로 넘겨받는 통로라고 할 수 있다.
여기에는 함수도 넘겨줄 수 있고 스테이트도 넘겨줄 수 있다.

1) props 사용하기

: 부모 컴포넌트를 살펴보자.

<Component title={this.state.name} />

• 다음과 같이 Component라는 이름의 자식 컴포넌트에게 name 이라는 스테이트값을 넘겨주고 있다.
• 여기서 title은 프롭스 이름에 해당한다. 이 이름을 이용해서 자식 컴포넌트는 해당 값을 사용할 수 있게 된다.

: 자식 컴포넌트를 살펴보자.

console.log(this.props.titls)

• Component 라는 자식 컴포넌트에서 위와 같이 콘솔을 찍어보면 어떻게 나올까??
• 그렇다 name에 해당하는 값을 콘솔창에서 확인할 수 있을 것이다.