궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

저번 Title을 출력하는 페이지에서 조금 더 진화해서 이번에는 버튼을 눌렀을때 화면에 출력되는 숫자가 증가하고 감소되는 이벤트를 만들어보자!

숫자와 버튼 생성하기🔧

가장 첫번째로 해야 할 일은 바로 우리가 증가시킬 숫자가 증가되고 있다는 모습을 보여줘야하기 때문에 0부터 시작할 숫자를 보여주도록 하고 증가와 감소를 시킬수 있도록 버튼을 만들어보자.

일단 이벤트를 만들기 전에 간단한 버튼과 숫자만 보이도록 했으니 명심하자!

Hello.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class Hello extends Component {

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <br />
        <h3>Counter : 0</h3>
        <div>
          <button name="inc"> + </button>
          <button name="dec"> - </button>
        </div>
      </div>
    );
  }
}```

App.js

import Hello from "./components/Hello";
import "./App.css";

function App() {
  return <Hello title="Hello, World!" />;
}

export default App;

이런식으로 화면이 나온다면 이벤트를 설정한 준비가 완료!

함수를 만들어보자!

먼저 우리가 Hello.js에서 숫자를 보이도록 <h3>Counter : {this.state.counter}</h3>

해당 코드를 넣어줬는데 사실 이부분은 숫자가 보이도록 하기 위해서 넣은 부분이고 변하게 하려면 useState를 사용해야 한다

왜 킨더 초콜릿 좋아할거같냐..
이 useState를 사용하기 전에 React에서 변화에 대한 개념을 잡기 위해서는 DOM의 개념이 정말정말 중요한데 이 개념은 아래의 강의를 보시면 정말 이해가 잘되니까 꼭 보길 바란다!
DOM 개념 강의 클릭!

생성자로 변수 만들기

기존의 화면에서 보이던 Counter:0은 변하지 않기 때문에 Counter를 변수처리로 해서 초기값을 0으로 나타내보자

App.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class Hello extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <br />
        <h3>Counter : {this.state.counter}</h3>
        <div>
          <button name="inc"> + </button>
          <button name="dec"> - </button>
        </div>
      </div>
    );
  }
}

여기서 생성자 부분 코드가 constructor(props) 이다. (props) 는 매개변수 인데 음, 쉽게 풀어서 말하자면 이 props라는 친구가 정보를 전달하는 매개체 역할을 하게 된다고 보면된다.

그리고 this.state 에서 Counter: 0, 을 넣어줬는데 이 자리가 이제 우리가 Counter를 변수로 처리해서 증가시키기 위해 0으로 초기값을 설정해주는 모습이다.

증가🔺와 감소🔻하는 함수를 만들어보기

이제 증가와 감수를 이벤트처리 할수 있도록 함수를 선언해보자
<다른 방법도 있지만 추후에 다시 올리도록 하겠습니다>

여기서 근데 잠깐 테스트,

  //증가함수
  handleIncrement() {
    this.state.counter += 1;
  }

  //감소함수
  handleDecrement() {
    this.state.counter -= 1;
  }

우리가 이렇게 증가와 감소를 만든다면 결과가 어떻게 될까?

출력이 되지 않고 오류가 생기게 된다.

이유는 간단한데 React에서는 state에 직접 접근해서 값을 바꾸면안된기 때문이다 그렇게 하면 re-render가 되지 않기 때문이다.
그렇다면 다시 함수를 수정해보도록 하자

Hello.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class Hello extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    };

    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }

  //증가함수
  handleIncrement() {
    this.setState({
      counter: this.state.counter + 1,
    });
  }

  //감소함수
  handleDecrement() {
    this.setState({
      counter: this.state.counter - 1,
    });
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <br />
        <h3>Counter : {this.state.counter}</h3>
        <div>
          <button name="inc" onClick={this.handleIncrement}>
            +
          </button>
          <button name="dec" onClick={this.handleDecrement}>
            -
          </button>
        </div>
      </div>
    );
  }
}

여기서 핵심 코드 부분을 꼽자면

증가와 감소의 함수

this.setState({
      counter: this.state.counter - 1,
    });

생성자에 bind

this.handleIncrement = this.handleIncrement.bind(this);
this.handleDecrement = this.handleDecrement.bind(this);

위에서 말했듯이 state에 직접 접근하면 안되기 때문에 setState를 사용했고, counter 변수에 증가한 값을 다시 저장해준다.

⭐여기서 중요한점⭐
DOM의 개념을 이해하신 분들은 아시겠지만 변화된 값을 화면에 노출시키는 방법은 값을 비교해서 변화된 값을 찾아서 화면에 나타내주는 방식입니다. 이 말에 핵심이 무엇이냐면,
위 생성자에서 만들어진 Counter가 0으로 초기화된 값은 절대로 변화가 되면 안된다는 점입니다. (바로 이점을 리액트에서는 불변성이라고 말을 합니다.)
생성자에서 초기값이 변하지 않아야 비교할 대상이 돼고, 그 값을 비교해서 변화된 값을 나타 낼수 있기 때문이죠.

또한 bind도 굉장히 중요한데 자바 스크립트 개념중에 매우 중요한 부분입니다!
여기서는 쉽게 설명하자면 컴포넌트에 함수를 전달한다고 생각하면 쉽습니다!
자세한 부분은 아래의 링크에서! 아직 저도 개념이 약해서 설명이 힘드네요..

컴포넌트에 함수 전달하기 링크

그러면 이제 코드가 완성돼었다. 이제 변화가 나타날까?

잘된다!

진짜 이벤트를 만들어 보자🎂

위에서 만든 부분은 함수를 생성해서 버튼으로 함수를 실행시켜 숫자가 변하는 방식으로 실행됬었는데 이번에는 진짜 이벤트를 만들어보자

필요없는 부분은 주석 처리 했습니다!

Hello.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export default class Hello extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    };

    // this.handleIncrement = this.handleIncrement.bind(this);
    // this.handleDecrement = this.handleDecrement.bind(this);

    this.handleClick = this.handleClick.bind(this);
  }

  // //증가함수
  // handleIncrement() {
  //   this.setState({
  //     counter: this.state.counter + 1,
  //   });
  // }

  // //감소함수
  // handleDecrement() {
  //   this.setState({
  //     counter: this.state.counter - 1,
  //   });
  // }

  handleClick(e) {
    const name = e.target.name;
    if (name === "inc") {
      this.setState({
        counter: this.state.counter + 1,
      });
    } else if (name === "dec") {
      this.setState({
        counter: this.state.counter - 1,
      });
    }
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <br />
        <h3>Counter : {this.state.counter}</h3>
        <div>
          <button name="inc" onClick={this.handleClick}>
            +
          </button>
          <button name="dec" onClick={this.handleClick}>
            -
          </button>
        </div>
      </div>
    );
  }
}

여기서 만들어진 이벤트 처리 부분이 바로

  handleClick(e) {
    const name = e.target.name;
    if (name === "inc") {
      this.setState({
        counter: this.state.counter + 1,
      });
    } else if (name === "dec") {
      this.setState({
        counter: this.state.counter - 1,
      });
    }
  }

여기 코드 부분인데, 간단하게 실행되는 방법을 설명하자면

<button name="inc" onClick={this.handleClick}>

우리가 버튼을 눌러서 onClick이 실행되면 handleClick(e) 해당 이벤트가 실행된다 여기서 매개 변수자리 의 (e) 가 event를 의미합니다.
const name = e.target.name; 또한 우리가 버튼에서 숫자를 증가시키는 버튼은 name="inc" 감소는 name="dec"로 할당해줬는데 바로 이 name의 값을 찾아주는 부분이 e.target.name 입니다. 이렇게 버튼의 값을 이벤트로 처리해 줘서 counter의 값을 증가시켜주는 것입니다.
마지막으로 함수를 bind 해줘야 하기때문에 생성자에 this.handleClick = this.handleClick.bind(this); 요것만 추가가 되면 끝!

오늘은 여기까지!