[React] React로 button이벤트 구현하기 (버튼 클릭 시 글자 변경하는 법)

React로 button 이벤트 구현하는 법을 알아보자

 

1. 준비과정

 1. create-react-app

로 프로젝트를 만든다.

 2. npm start로 실행

 3. App.js를 아래 코드로 작성

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Example from "./Example";

function App() {
  return (
    <div>
      <Example />
    </div>
  );
}

export default App;

4. Example.js 파일을 만들고 아래 코드로 작성

import React from "react";

export default class Eaxmple extends React.Component {
  render() {
    return <div></div>;
  }
}

 여기까지 했다면 아무것도 없는 빈 화면이 나온다.

 

2. state를 이용하여 text 변수 추가하기

constructor(props) {
    super(props);

    this.state = {
      text: "변경 전이요",
    };
  }

render 위에 코드를 추가해준다.

 

3. 버튼 추가하기

버튼 추가 코드

render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <button>버튼</button>
      </div>
    );
  }

실행 이미지

이런화면이 나오면 성공

 

4. 글자변경 함수 작성

아래와 같이 글자 변경하는 함수를 작성한다.

  changeText = () => {
    this.setState({
      text: "변경 성공!",
    });
  };

setState 함수는 state 안에 있는 값을 변경할 때 사용된다.

react의 state함수는 특별해서 직접 변경하면 작동하지 않는다.

 

잘 못된 예시

this.state.text = "변경 선공"

이렇게 작성하면 작동하지 않는다.

 

5. 버튼에 onClick 함수 적용

아래와 같이 코드를 작성한다.

  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <button onClick={this.changeText}>버튼</button>
      </div>
    );
  }

react에서 값이나 함수를 사용할 때는 {}를 감싸서 사용해 주면 된다.

 

6. 결과

버튼을 누르면 아래와 같이 Text가 바뀌는 것을 볼 수 있다.

결과 이미지