[ReactJS로 영화 웹 서비스 만들기] 03. STATE

Class Componant and State

앞서 했던 Food 예제는 모두 지우고, app.js 안의 app 함수를 class화 하자.  

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {

    
}

export default App;

 

class는 반환하는 함수를 만들어주지 않는이상 return이 없다. 그렇다면 원하는 값을 반환하기위한 방법은 뭘까?

 

여기서 class를 React.Componet를 extends(확장) 하였다. 이 안에 render라는 함수메소드가 존재한다. 이를 이용하자.  

 

리액트는 자동적으로 React.Component의 render메소드를 자동으로 실행한다.

 

함수대신에 클래스를 사용하는 이유는 state를 사용하기 위해서이다.

 

state는 object이며, component의 데이터를 저장할 수 있다, 그리고 이 데이터는 변한다.

 

아래의 예시를 보면 이해가 빠를것 이다.

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return <h1>I'm a class {this.state.count}</h1>;
  }
}

export default App;

 

state의 값을 변경하고 싶을때에는 직접적으로 변경할 수 없다. 직접 변경하려고 시도할때에는 아래와 같은 오류 메세지를 확인할수있다.

 

ex. this.state.count = 1;

 

이유는 render 메소드는 자동으로 실행이 되지만, refresh하지는 않기 때문이다. 따라서 refresh될때마다 render메소드가 다시 호출되기를 원하는 것이다. 이때, this.setState() 를 이용하면 된다.  

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState({ count: this.state.count + 1 });
  };
  minus = () => {
    this.setState({ count: this.state.count - 1 });
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

add와 minus가 작동하지만 이는 결코 좋은 코드가 아니다. 왜냐하면 나중에 값이 커지거나하면 성능상 좋지 못하기 때문이다.  

 

 

React component life cycle

https://ko.reactjs.org/docs/react-component.html

React.Component – React

아래 메소드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

 

componentDidMount 메소드를 이용하여 6초 이후에 값이 변경되게 해보자.

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    isLoading: true,
  };
  componentDidMount() {
    setTimeout(() => this.setState({ isLoading: false }), 6000);
  }
  render() {
    const { isLoading } = this.state; // ES6에서만 작동
    // return <div>{this.state.isLoading ? "Loading..." : "We are ready"}</div>; ES6 이하 작동
    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;
  }
}

export default App;

 

 

componentDidMount 메소드에서 우리가 이론적으로 해야할 일은 data를 fetch하는 일이다.  API로부터 data fetching이 완료되면, Render를 하는 것이다.