11 - state와 클래스형 컴포넌트(1)

1. state로 숫자 증감 기능 만들기

• state는 동적 데이터를 다룰 때 사용한다.
• state는 클래스형 컴포넌트에서 사용가능

 

- 클래스형 컴포넌트 작성하기

App.js의 컴포넌트를 모두 지운다.

import React from 'react';

export default App;

 

다음처럼 코드를 작성한다.

import React from 'react';

class App extends React.Component {
  
}

export default App;

핵심은 App 클래스가 React.Component 클래스를 상속 받도록

extends React.Component 를 붙인다.

이것이 클래스형 컴포넌트의 기본 틀이다.

 

중요한 것은 클래스형 컴포넌트가 되려면 App 클래스가

리액트가 제공하는 Component 클래스를 반드시 상속 받아야한다는 것이다.

 

이제 App컴포넌트가 JSX를 반환해야 하는데 클래스라서 return 문을 사용할 수 없다.

클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용함.

 

- render() 함수 사용

import React from 'react';

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

export default App;

render() 부분을 추가해주고 앱을 실행하면 함수형 컴포넌트와 차이가 없다.

 

두 가지의 차이는

함수형 컴포넌트는 return 문이 JSX를 반환하고,

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

리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시켜준다.

 

클래스형 컴포넌트를 사용하는 이유는 state를 사용하기 위함이다.

 

 

- state 정의하기

state 사용은 state = { }; 로 정의하면 된다.

import React from 'react';

class App extends React.Component {
  state = {

  };
  render() {
    return <h1>I'm a class conponent</h1>;
  }
}

export default App;

state는 객체 형태의 데이터다.

반드시 클래스형 컴포넌트 안에서 소문자로 state라고 적으면 된다.

 

 

- state에 count값 추가하고 사용하기

import React from 'react';

class App extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return <h1>The number is: {this.state.count}</h1>;
  }
}

export default App;

state에 count 라는 키를 추가하고 키값으로 0을 넣는다.

render() 함수에서 {this.state.count}를 출력한다.

앱을 실행해서 확인해 본다.

state는 동적 데이터를 저장할 수 있다.

count를 바꾸기 위해서 버튼을 추가한다.

 

 

- 버튼 눌러서 count state 값 변경하기

<Add>와 <Minus> 버튼 추가.

button 엘리먼트에 onClick 속성을 넣고,

속성값으로 this.add와 this.minus 를 넣어준다.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0,
  };
  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;

증가 감소를 해주기 위해 2개의 함수를 만들어 줘야한다.

 

 

2. 숫자 증감 기능 제대로 만들기

 

아래의 코드는 동작하지 않는다.

add = () => {
  this.state.count = 1;
}

minus = () => {
  this.state.count = -1;
}

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

원래 리액트는 state가 변경되면 render() 함수를 다시 실행해서 

변경된 state를 출력한다.

하지만 state를 직접 변경하면 render() 함수를 다시 실행하지 않음.

 

Do not mutate state directly. Use setState()

해당 경고 메시지가 뜬다.

setState() 함수를 사용해서 state 값을 변경해야 한다.

 

 

- setState() 함수로 count state 변경하기

class App extends React.Component {
  state = {
    count: 0,
  };
  
  add = () => {
    this.setState({ count: 1});
  };

  minus = () => {
    this.setState({ 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>
    );
  }
}

setState() 함수의 첫 번째 인자로 count 키와 키값을 넣은 객체를 전달했다.

 

앱을 실행하고 Add와 Minus 를 누르면 각각 1과 -1을 출력한다.

 

실행과정은

1. setState() 함수가 동작
2. state가 새로운 값으로 바뀜.
3. 이어서 render() 함수가 자동으로 실행.
4. 화면 업데이트

브라우저 화면에서 f12를 눌러 개발자 도구의 Elements 탭을 연 다음,

div 엘리먼트 옆에 ▶표시를 눌더서 펼쳐보자.

그리고 다시 Add, Minus 버튼을 눌러보자.

HTML만 변하고, 화면은 바뀌어도 새로고침이 일어나지 않는다.

이것이 리액트의 장점이고, 화면 구성이 빠른것이다.

 

 

- 버튼을 누르면 count state 값을 증가, 감소 시키기

  add = () => {
    this.setState({ count: this.state.count + 1});
  };

  minus = () => {
    this.setState({ count: this.state.count - 1});
  };

코드를 위처럼 바꿔준다.

그리고 리액트 앱을 실행해서 버튼을 눌러보자.

잘 동작한다.

다만 {count: this.state.count + 1} 같이 코드 작성하여 state를 업데이트하는 방법은 좋지 않다.

성능 문제가 생길수 있음.

대신 setState() 함수의 인자로 함수를 전달하면 성능 문제 없이 state를 업데이트 할 수 있다.

 

 

- add, minus() 함수 개선

  add = () => {
    this.setState(current => ({       <---- current에는 현재 state가 넘어오고
      count: current.count + 1,       <---- 그 state의 count에 1을 더한다.
    }));
  };

  minus = () => {
    this.setState(current => ({
      count: current.count - 1,
    }));
  };

위처럼 코드를 바꿔준다.

 

setState() 함수는 바뀐 state의 데이터만 업데이트한다.

변경 대상이 아닌 키와 키값은 그래도 유지된다.