[React.js] 버튼 클릭 이벤트 구현하기

요즘 리액트로 프론트를 구현하는 프로젝트를 맡아서 진행중인데, 자바스크립트도 건너뛰고 프레임워크 공부 경험이 없다보니 어렵게 느껴진다. 그래도 요즘 웹 공부에 재미를 많이 느끼고 있어서 다행이지만 한편으로는 그동안 이걸 안하고 뭐했지? 라는 생각이 들기도한다..

어쨌든 까먹지 않기 위해서 간단한 내용이라도 조금씩 정리를 해두어야겠다.. 기초 공부 말고 실제로 프로젝트를 진행하면서 코드를 재사용하기 위해서라도 하하,,,, 빨리 리액트를 편하게 다루고 싶다. 어쨌든 시작!

일단 버튼 하나만 달랑(?) 구현해볼 것이다. ON이라고 쓰여있는 버튼을 마우스로 클릭하면 OFF로, 또 클릭하면 다시 ON으로 버튼의 텍스트를 바꾼다.

1. js 파일 만들기

src 폴더에 js파일을 하나 만든다.

2. 소스코드 작성

ver1. Bind 활용

import React from 'react';
import ReactDOM from 'react-dom';
 
// Toggle이라는 이름을 가진 리액트 컴포넌트
class Toggle extends React.Component {
    
    // constructor에서 this.handleClick에 바인드
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        
        // This binding is necessary to make 'this' work in the callback
        this.handleClick = this.handleClick.bind(this);
    }
    
    // 함수
    handleClick() {
        this.setState(state => ({
            isToggleOn: !state.isToggleOn
        }));
    }
 
    render() {
        return (
            // 이벤트 핸들러 넣어주기
            <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}
 
ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);
 
// index.js에서 import 하기 위해 export
export default Toggle;
 

Line(13) - Line(12)의 주석에서 알 수 있듯이 bind를 꼭 해주어야 한다.

Line(17~21) - Bind 코드를 활용하는 handleClick함수를 구현한다.

ver2. Arrow Function 활용 (Bind X)

import React from 'react';
import ReactDOM from 'react-dom';
 
// Toggle이라는 이름을 가진 리액트 컴포넌트
class Toggle extends React.Component {
    
    // constructor에서 this.handleClick에 바인드
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    }
    
    // Arrow function으로 변경
    handleClick = () => {
        this.setState(state => ({
            isToggleOn: !state.isToggleOn
        }));
    }
 
    render() {
        return (
            // 이벤트 핸들러 넣어주기
            <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}
 
ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);
 
// index.js에서 import 하기 위해 export
export default Toggle;

Line(8~11) - 이전과 다르게 bind하지 않았다. 따라서 함수가 많아지면 일일이 bind를 안해도 되기 때문에 이 방법이 편할 수 있다.

Line(13~18) - 만들었던 handleClick 함수를 Arrow function으로 변경

Line(36) - Toggle 대신에 실수로 해당 js파일 이름을 넣어버리는 실수를 해서 오류가 났었다. 조심!

3. 소스코드 적용

- index.js에서 만든 js파일을 import 시켜준다.

예) import test from './test';

- ReactDOM.render를 잊지말자!

예) ReactDOM.render(<test />, document.getElementById('root'));

4. 실행

위와 같은 과정을 완료하고 저장하면 다음과 같이 실행될 것이다. (명령어: npm start)