5. state와 클래스형 컴포넌트

state는 동적 데이터를 다룰 때 사용한다.

props는 그런 데이터를 다루지 못하기 때문에.

우리는 state를 사용하기 위해서 클래스형 컴포넌트를 사용할 것이다.

 

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>I'm a class component</h1>
  }

}

export default App;

class컴포넌트는 클래스라서 return문을 사용할 수가 없어서,

JSX를 반환하려면 render()함수를 사용해서 그 안에 return을 작성한다.

 

함수형 컴포넌트 : return 문이 JSX를 반환

클래스형 컴포넌트 : render() 함수가 JSX를 반환한다.

 

리액트는 state를 직접 변경하지 못한다.

state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력하는데,

state를 직접 변경하는 경우에는 render()함수를 다시 실행하지 않는다.

 

그래서 setState()함수로 변경해야된다.

버튼을 누르면 증감하는 함수를 state에 넣어보겠다.

 

<코드기록>

import React from 'react';

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

  add = () => this.setState(current => ({
    count: current.count + 1,
  }));
  minus = () => this.setState(current => ({
    count: current.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;

<실행화면>

 

 

---

이제 클래스형 컴포넌트의 생명주기 함수를 적용해서 Movie 컴포넌트를 구성하겠다.

 

<영화 데이터 로딩 상태 표시해 주기>

 

생명주기함수인 componentDidMount() 함수에

setTimeout() 함수를 적용해서 로딩현상을 구현해보겠다.

 

6초 후에 isLoading state를 false로 바꿀거다.

 

<코드기록>

import React from 'react';

class App extends React.Component {
  state = {
    isLoading: true,
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 6000);
  }

  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? 'Loading...' : 'We are ready'}</div>
  }

}

export default App;

 

<실행화면>

 

We are ready 자리에 영화 데이터를 출력할거다.

---

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.