[React] Movie app clone coding : Component State

3 minute read
, , ,

4-1. Thinking in React: Component State

State

State 는 react component 안에 있는 object 이다.

state 가 바뀔 때마다, component 는 다시 render 한다. 즉, component 안에 state 가 바뀔 때마다 render 가 발생한다.

1class App extends Component {    // (1) component 안에 state가 바뀔 때마다
2  render() {                     // (2) render() 가 발생
3   ... 
4  }
5}

state를 만드는 방법

 1class App extends Component {    
 2  state = {                  // State 작성
 3      greeting : 'Hello!'
 4  }
 5
 6/* component가 mount 되면 5초를 기다리고 greeting을 업데이트한다. 
 7 * 아래 코드는 component가 mount할 때마다, 
 8 * greeting을 'hello' → 'hello again' 으로 변경한다는 의미이다.
 9 * 아래의 render가 다시 작동해서 5초 후에 'hello again'으로 변경이 된다.
10 */
11
12  componentDidMount() {
13      setTimeout(() => {
14          this.setState({   // 새로운 state를 만든다.
15              greeting: 'Hello again!'
16          })
17      }, 5000)
18  }
19
20/* 아래의 render가 5초후 다시 작동되면 hello again으로 변경*/
21  render() {
22    return (
23      <div className="App">
24        {this.state.greeting}    // render에서 읽어들임
25        {movies.map((movie, index) => {
26          return <Movie title={movie.title} poster={movie.poster} key={index} />
27        })}
28      </div>
29    );
30  }
31}

state ={ greeting : 'Hello!' } 는 component 를 default state와 함께 load 하는 방법이고, component가 componentDidMount() {setTimeout(() => ...)} 한 후에는 5초 후에 ‘Hello again!’ 이 되도록 입력했다.

  • 주의 💡

    아래와 같이 작성하여 greeting을 업데이트 하지는 않는다. this.state.greeting 처럼 state를 직접적으로 쓰면 안된다. 직접적으로 변경하면 render 설정들이 작동하지 않는다. this.setState를 사용해야 한다.

1 componentDidMount() {
2      setTimeout(() => {
3        this.state.greeting = 'something'
4      }, 5000)
5  }

정리

state 를 바꿀 때는 setState 를 설정하고 업데이트할 때마다 새로운 state와 함께 render 가 작동한다.