12. 간단한 영화 웹 서비스 만들기 7

이번 강의에서 배울 것은 state 입니다.

state는 리액트 컴포넌트 안에 있는 오브젝트입니다.

컴포넌트 안에 state가 바뀔 때마다, 컴포넌트는 다시 render 할 겁니다.

state를 작성해보겠습니다.

class App extends Component {

//Render : componentWillMount() -> render() -> componentDidMount()

//Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentwillUpdate() -> render() -> componentDidUpdate

state = {

greeting: 'Hello React왕초보'

}

render() {

return (

<div className="App">

{this.state.greeting}

{movies.map((movie, index) => {

return (

<Movie title={movie.title} poster={movie.poster} key={index} />

);

})}

</div>

);

}

}

컴포넌트가 mount되면 5초를 기다리고, greeting을 업데이트 할 겁니다.

그렇게 하기 위해서 setTimeout를 작성하겠습니다. 

state는 직접적으로 쓰면 안됩니다. 그렇기 때문에 this.setState 를 사용할 겁니다.

아래 코딩의 뜻은 Hello React왕초보를 출력하고 5초뒤에 Hello again으로 변경하라는 뜻입니다.

state = {

greeting: 'Hello React왕초보'

}

componentDidMount(){

setTimeout(() => {

this.setState({

greeting: 'Hello again!'

})

}, 5000)

}

저장하고 처음 출력되는 내용을 확인하시고 , 5초뒤에 잘 변경 되는지 확인해보시기 바랍니다. 

아래에 있는 state는 컴포넌트를 로드하는 방법입니다(디폴트 state와 함께 로드 됩니다.)

state = {

greeting: 'Hello React왕초보'

}

아래에 컴포넌트가 did mount한 후에는 5초 후에 hello again 으로 변경되도록 코딩을 한 것입니다.

componentDidMount(){

setTimeout(() => {

this.setState({

greeting: 'Hello again!'

})

}, 5000)

}

꼭 기억해야 할 것은 state를 바꿀 때는 setState를 설정하고, 

업데이트 할 때마다 새로운 state와 함께 render가 작동된다는 것입니다. 

코딩한 내용은 적었지만 state는 리액트의 중요한 문법 중에 하나입니다.

이후 시간에 state를 실전에서 쓰면서 이해가 더 잘 되실겁니다.

고맙습니다.