Chapter03. 리엑트 이벤트 핸들링

<< 학습 목표 >>

1. 이벤트 핸들러를 리엑트 방식으로 등록할 수 있다.

2. 이벤트 핸들러로 적절한 인자를 전달할 수 있다.

---

이번 글에서 배우는 내용은 리엑트 라기 보다는 JS의 함수에 대한 내용으로 만약 이해되지 않는 부분이 있거나 "오~ 이렇게 되네?" 라는 생각이 들었다면 JS의 함수를 꼭 공부하고 와야함

 

우선 프로젝트 -> src -> chapter03 폴더를 추가하자

---

HTML, JS, 리엑트의 이벤트 등록 방식을 비교해보자

 

HTML에서는 이벤트를 등록할 때 on으로 시작하는 이벤트명을 태그에 사용해 이벤트 핸들러를 등록함

JS는 이벤트를 등록할 태그를 불러온 뒤 addEventListener 함수를 사용해 이벤트 핸들러를 등록함

리엑트는 on으로 시작하는 이벤트명을 태그에 사용해 이벤트 핸들러를 등록함

 

HTML과 리엑트, JS와 리엑트를 비교해보면 HTML, JS가 모두 섞인 방식이 리엑트임

리엑트에서 이벤트를 등록할 때는 태그에 on으로 시작하는 이벤트 명을 태그에 사용함

등록할 이벤트명은 () 없이 이벤트 핸들러 이름만 명시함

---

리엑트에서 이벤트 핸들러를 위와 같이 등록할 수도 있지만 간단한 이벤트 핸들러의 경우 생성하면서 등록할 수도 있음

 

버튼을 클릭 했을 때 웹 페이지에 "클릭했음!" 을 출력하는 컴포넌트를 만들어보자

프로젝트 -> src -> chapter03 -> Component1.jsx 파일을 추가하고 아래 코드를 추가하자

import React from 'react';

function Component1() {
    return(
        <div>
            <button type="button" onClick={function() { alert("클릭했음!"); }}>클릭!</button>
        </div>
    );
}

export default Component1;

 

이렇게 간단한 이벤트 핸들러의 경우 생성하면서 등록할 수 있음

당연히 JS의 화살표 함수를 사용해 생성하면서 등록할 수도 있음

---

한번 더 함수를 활용하는 방법을 보자

 

프로젝트 -> src -> Component3.jsx 파일을 추가하고 아래 코드를 추가하자

import React from 'react';

function Component3() {
    let printName = () => {
        let nameTag = document.getElementById("name");
        let panelTag = document.getElementById("panel");

        panelTag.textContent = "사용자가 입력한 이름은 " + nameTag.value + " 입니다";
    };

    return(
        <div>
            <input type="text" id="name" placeholder="이름"></input>
            <p id="panel"></p>
            <button type="button" onClick={printName}>이름 출력</button>
        </div>
    );
}

export default Component3;

 

<< 코드 설명 >>

(1). 사용자가 이름을 입력할 수 있는 input 태그

(2). 사용자가 입력한 이름을 출력할 p 태그

(3). 버튼을 누르면 (4)의 함수를 호출함

(4). 함수가 호츨되면

  (4-1). id가 name인 태그를 불러옴

  (4-2). id가 panel인 태그를 불러옴

  (4-3). id가 panel인 태그에 사용자가 입력한 이름을 출력함

---

이번에는 함수의 매개변수로 값을 전달하는 방법을 보자

이 역시 JS이므로 우리가 알고 있는 방식 그대로 다 적용 가능함

 

프로젝트 -> src -> chapter03 -> Component4.jsx 를 추가하고 아래 코드를 추가하자

import React from 'react';

function Component4() {
    let printName = (name) => {
        let namePanelTag = document.getElementById("name_panel");
        namePanelTag.textContent = name;
    };

    let clickBtn = () => {
        printName("홍길동");
    }

    return(
        <div>
            <p id="name_panel"></p>
            <button type="button" onClick={clickBtn}>이름 출력</button>
        </div>
    );
}

export default Component4;

<< 코드 설명 >>

(1). 이름을 출력할 p 태그

(2). 버튼을 누르면 (3)의 함수를 호출함

(3). 함수가 호출되면 (4)의 함수를 호출하는데 함수로 "홍길동" 이름을 전달

(4). 전달 받은 이름을 (1)의 p 태그에 출력

 

이 컴포넌트를 웹 페이지에 출력해 결과를 확인해보자

 

 

이렇게 어떤 함수로 인자를 전달하려면 (3)처럼 중간 다리 역할을 할 함수가 필요함

만약 이를 아래와 같이 구현한다면 이 페이지에는 문제가 생겨 화면에 아무것도 보이지 않음

위 코드와 아래 코드를 비교해 무엇이 다른지, 아래 코드는 왜 문제가 생기는지 생각해보자

만약 이유를 모르겠다면 반드시 리엑트의 JSX 로 돌아가서 공부하고 와야함

 

이번에는 함수로 이벤트(event)를 전달하는 방법을 보자

이 역시도 우리가 이미 알고 있는 JS 방식과 동일함

import React from 'react';

function Component5() {
    let changeUrl = (event) => {
        changeATag(event.target.value);
    };

    let changeATag = (url) => {
        let aTag = document.getElementById("anchor");
        aTag.setAttribute("href", url);
        aTag.textContent = url + " 으로 이동~!";
    }

    return(
        <div>
            <input type="url" placeholder="이동하고 싶은 URL을 입력하세요." onChange={changeUrl} />
            <br />
            <a href="#" id="anchor"></a>
        </div>
    );
}

export default Component5;

 

<< 코드 설명 >>

(1). 사용자가 url을 입력할 수 있는 input 태그 / input 태그에 url을 입력하면 (3)의 함수가 호출됨

(2). 사용자가 입력한 url로 이동 시켜주는 a 태그

(3). 매개변수로 이벤트를 전달 받아 사용자가 입력한 url을 (4)의 함수로 전달

(4). 사용자가 입력한 url로 a 태그를 구현함

 

input 태그에 onChange 이벤트 핸들러를 등록했으므로 한 자 한 자 입력할 때마다 (3)의 함수가 호출됨

이 컴포넌트를 웹 페이지에 출력하고 url을 입력해보자

---

이번 글에서 배우는 내용은 리엑트 라기 보다는 JS의 함수에 대한 내용으로 만약 이해되지 않는 부분이 있거나 "오~ 이렇게 되네?" 라는 생각이 들었다면 JS의 함수를 꼭 공부하고 와야함