[리액트(React) 학습자를 위한 기초지식] Props&State - #3 State로 이벤트 작성

리액트(React) 학습에 필요한 사전지식

Props&State - #3 state로 이벤트 작성

이벤트는 사용자가 웹 브라우저에서 어떠한 동작이나 행동을 하는 것을 의미합니다. 예를 들면 스크롤을 움직이거나, 마우스 포인터를 움직이거나, 버튼을 누르는 동작이 있습니다. 리액트에서는 JSX로 이벤트를 비교적 쉽게 구현할 수 있습니다. 이벤트를 구현하고 싶은 태그에 on*** 형식으로 원하는 이벤트를 작성하면 됩니다. on 다음에 나오는 이벤트명 첫 스펠링은 대문자로 해주어야 합니다. 간단하게 이벤트 코드를 작성하겠습니다.

SampleButton.js

import React, { Component } from 'react';

class SampleButton extends Component {

handleClick(){

alert('Button Click!');

}

render() {

return (

<div>

<button onClick={this.handleClick}>BUTTON</button>

</div>

);

}

}

export default SampleButton;

SampleButton 컴포넌트를 App.js에서 불러옵니다. 그리고 실행해보세요.

App.js

import React from 'react';

import SampleButton from './basic/SampleButton';

const App = () => {

return(

<div>

<SampleButton />

</div>

);

}

export default App;

실행 결과

그러면 위에서 작성한 것 처럼 함수를 때로 빼서 불러오는 형식이 아니라, 이벤트에 익명함수(함수명이 없는 함수)를 직접 작성하는 방법은 어떨까요? 작성해보고 실행 해 보세요.

SampleButton.js

import React, { Component } from 'react';

class SampleButton extends Component {

render() {

return (

<div>

<button onClick={

() => alert('Button Click!')

}>BUTTON</button>

</div>

);

}

}

export default SampleButton;

위에랑 같은 결과가 나오지 않나요? 혹시 굳이 함수를 생성하지 않고 넣고싶은 이벤트만 작성한다면 어떻게 될까요? 우리가 위에서 작성한 이벤트는 클릭시 alert()가 나오도록 작성했습니다. 

<button onClick={alert('Button Click!')}>BUTTON</button>

오류는 나지 않습니다. 하지만 리액트 앱을 실행하자마자 alert창이 등장합니다. 다시 처음에 작성했던 코드를 가져와볼까요? onClick에 함수를 불러올 때 함수명 뒤에 ()를 붙이면 어떻게 될까요?

handleClick(){

alert('Button Click!');

}

render() {

return (

<div>

<button onClick={this.handleClick()}>BUTTON</button>

</div>

);

}

alert()만 작성한 것과 같은 결과가 나옵니다. render()에서 이벤트 함수를 불러올 때 주의해야 할 점이 바로 이 부분 입니다. 문제가 된 코드를 다시 볼까요?

//함수를 불러왔는데 끝에 ()를 붙인 경우

<button onClick={this.handleClick()}>BUTTON</button>

//별도의 함수 없이 원펀치 쓰리강냉이로 냅다 꽂아버릴 때

<button onClick={alert('Button Click!')}>BUTTON</button>

이렇게 작성하면 다메요! (아니 이 시국에..?) 혹시 느끼셨나요? 이렇게 작성해버리면 onClick 이벤트가 발생했을 때 alert창이 뜨는 것이 아니라, JSX를 컴파일하고 컴포넌트를 실행할 때 onClick이 바로 실행됩니다. 즉, 사용자가 클릭을 할 때 까지 기다렸다가 버튼을 클릭한 이후 onClick 이벤트와 연결이 되어야 하는데, 이런 과정 없이 자동으로 처리되었습니다. 따라서 앞으로 이벤트를 작성할 때, 이벤트를 다루는 함수를 준비하여 전달하는 방법을 사용해주세요.

마지막으로 onClick 이벤트로 State를 변경하도록 하겠습니다.

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019