React props & state

오늘은 React의 데이터 개념? 이라고 하면 될 것 같다.

간단하게 사용법을 알아보자.

 

---

1. state

state에 대한 React에서의 의미가 있겠지만, 나는 그냥 내가 생각하는 state에 대한 정의를 하려한다.

먼저 state는 뭐랄까, 변수 선언의 느낌이라고 보면 될 것 같다.

예를 들면,

state = {

    helloMessage: 'Hello ReactJs!',

    test: 'test',

    count: 0

};

이런식으로 선언할 수 있고,

해당 값들을 사용할 수도 있다.

<span>{this.state.count}</span>

위와 같이 this.state.count를 출력하게 되면,

위에서 0으로 선언했기 때문에 0이 찍힌다.

 

그렇다면, state의 값을 바꾸고 싶을 땐 어떻게 할까?

정답은 setState를 사용하면 된다.

이것도 예를 들어보자.

this.setState({count: this.state.count + 1});

해당 문장을 실행시키는 button을 만들고 

button을 누르면 값이 변하는 모습을 확인할 수 있다.

예제가 갑자기 이것 저것 추가됐는데, 나도 이것저것 두서없이 하고 있기 때문이다..

반대로 -1을 해주는 버튼을 만들고 눌러보면

this.setState({count: this.state.count - 1});

이런식으로 변하는 모습을 확인할 수 있다.

 

---

2. props

props는 자신의 class 안에서 다른 class의 state를 부르는 명칭이다.

이것도 예를 들어보자.

위에서 만든 count의 값을 새로만든 class에서 사용한다고 가정하자.

이런 class를 새로 만들고,

위에서 state가 정의되어 있는 class에서 해당 PropTestClass의 count의 값을 넣어줄 수 있는데,

<PropTestClass count={this.state.count} />

이런식으로 사용하면 된다.

 

이렇게 하면 A Class와 B Class 모두 같은 count의 값을 공유하게되고,

A Class 입장에서의 count는 state라고 부르며,

B Class 입장에서의 count는 props라고 부른다.

 

오늘은 여기까지.