[ React ] 리액트 동적 데이터 state

 

 

 

리액트의 컴포넌트가 다루는 데이터 중 저번 게시글에선 props 를 다루었다.

​

이번 게시글에선 동적 데이터인 state 를 다뤄보자.

​

​

앞에서도 말했듯 props는 부모 컴포넌트에서 넘어온 정적 데이터 형태이다.

​

반면, state는 컴포넌트 내부에서 선언해 내부에서 수정 및 작업이 가능한 동적 데이터 형태이다.

​

아래 소스를 보고 간단히 짚어보자. ( index.js 와 index.html 은 이전 props 설명 게시글과 동일 )

 

 

 

 

App.js

import React, { Component } from 'react';
import Count from './Count';


class App extends Component {

  //render 함수
  render() {

    return (

      //JSX
      <div>
        <Count />
      </div>
    );
  }
}

export default App; 

 

App.js 의 소스구성은 저번 게시글과 별 다른 차이점이 없다.

 

Count를 호출한다는 것만 알아두자.

 

 

 

Count.js

import React, { Component } from "react";

class Count extends Component {
  state = {
    number: 0
  };

  btnAdd1 = () => {
    const { number } = this.state;
    this.setState({
      number: number + 1,
    });
  };

  btnAdd2 = () => {
    const { number } = this.state;
    this.setState({
      number: number + 2,
    });
  };

  btnAdd3 = () => {
    const { number } = this.state;
    this.setState({
      number: number + 3,
    });
  };

  render() {
    return (
      <div>
        <h2>숫자 증가시키기</h2>
        <div> 값 : {this.state.number} </div>
        <button onClick={this.btnAdd1}>+1</button>
        <button onClick={this.btnAdd2}>+2</button>
        <button onClick={this.btnAdd3}>+3</button>
      </div>
    );
  }
}
export default Count;

 

props 를 설명할 땐 안나왔던 것들 위주로만 살펴보자.

state = {
    number: 0
};

 

이는 state 라는 공간을 선언 해놓은 것인데 보통 우리들이 변수를 선언 및 초기화하는 것과 같은 맥상이라 보면된다.

​

하지만 차이점으로는 우리가 만약 평소에 name 이라는 변수를 선언하고

​

이 name 의 값을 '사과'로 할당하려면 우리는 var name = '사과' 식으로 코딩을 했을것이다.

​

하지만 state 는 값을 수정하거나 할당하기 위해선 반드시 setState({}) 를 거쳐야 한다.

 

//state 안에 값 할당
state = {
    number: 0
};

//state 안의 number 를 1 증가시킴 ( var number = 0; number++; 와 같은 맥락 )
this.setState({
    number: number + 1,
});

 

다음으로는 소스를 보면 btnAdd1, btnAdd2, btnAdd3 함수가 있는데 btnAdd3 함수만 설명해보자면,

//btnAdd3 함수
btnAdd3 = () => {

    //this.state ( number ) 를 담는다.
    const { number } = this.state;

    //number 에 3을 증가시키고 state 안의 number 값을 현 number 로 할당한다.
    this.setState({
         number: number + 3,
    });

};

 

 

이 함수는 어디서 호출하느냐? 하니 render 함수안의 버튼을 클릭할 때 호출된다.

render() {
    return (
       <div>
          <h2>숫자 증가시키기</h2>
          <div> 값 : {this.state.number} </div>
          <button onClick={this.btnAdd1}>+1</button> //현 컴포넌트(this)안의 btnAdd1 함수 호출
          <button onClick={this.btnAdd2}>+2</button> //현 컴포넌트(this)안의 btnAdd2 함수 호출
          <button onClick={this.btnAdd3}>+3</button> //현 컴포넌트(this)안의 btnAdd3 함수 호출
       </div>
    );
}

 

 

그런데 여기서 중요하게 봐야할 부분이 각 함수들을 선언할 때 화살표 함수를 사용했는데,

btnAdd1 = () => {
}
btnAdd2 = () => {
}
btnAdd3 = () => {
}

 

이는 Count.js 의 render 함수안에서 this.btnAdd1 을 return 해줄 때

 

이를 받아주는 App.js 쪽에서 this 연결이 끊기게 되는데,

 

화살표 함수를 이용하면 이러한 문제를 해결할 수 있다.

 

 

 

실행화면