ReactJS - Thinking in React: Component State | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

이번 포스팅에서 다룰 state는 리액트 컴포넌트 안에 있는 오브젝트이다.

state가 바뀔 때 마다, 컴포넌트는 다시 render할 것이다.

첫번째 state를 만들어 보자.

state = {greeting: 'Hello!'}와

{this.state.greeting}을 넣어보자.

Hello!가 출력된다.

componentDidMount() 내에 함수를 넣어보자.

컴포넌트가 mount되면 5초(5000ms)를 기다리고 greeting을 업데이트 할 것이다.

위에 작성한 것처럼, state를 직접적으로 쓰면 안된다.

저장하고 살펴보면,

직접적으로 state를 변경하지 말라고 써있다.

직접적으로 state를 변경하면 위의 render 설정들이 작동을 안하기 때문이다.

따라서 state를 업데이트 하려면, this.setState를 사용해야 한다.

this.setState({greeting: 'Hello again!'})

코드를 작성한 대로, 5초동안 Hello!가 출력되고,

5초가 지나면 Hello again!으로 바뀐다.