컴포넌트(6) 이벤트 핸들러 Event Handler

1. 컴포넌트에서 DOM 이벤트 사용

- 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다.

- HTML 기존 형식을 카멜식 표기로 변경해서 사용한다.

onclick => onClick
onkeyup => onKeyUp

="" 안에 함수를 쓰는 게 아니라, {}안에 쓴다.

onClick="changeName()"  (x) 
onClick={changeName}    (o)

ex)

import React, { useState } from 'react';

const Main = () => {
    const [ myName, setMyName ] = useState("Dev.MK") 
    function changeName() {
        setMyName(myName === "Dev.MK" ? "개발자" : "Dev.MK");
    }
    return (
        <div>
            <h1>안녕하세요. {myName} 입니다.</h1>
            <button onClick={changeName}>Change</button>
        </div>
    );
};

export default Main;

 

함수를 컴포넌트에 직접 선언할 수 도 있다.

import React, { useState } from 'react';

const Main = () => {
    const [ myName, setMyName ] = useState("Dev.MK") 
    return (
        <div>
        <h1>안녕하세요. {myName} 입니다.</h1>
            <button 
                onClick={() => {
                    setMyName(myName === "Dev.MK" ? "개발자" : "Dev.MK");
                }}>
         	Change
            </button>
        </div>
    );
};

export default Main;

2. 이벤트의 기본동작 방지 처리

- React에서는 false를 반환해도 기본 동작을 방지할 수 없다.

- 반드시 preventDefault를 명시적으로 호출해야 한다.

ex) Change 클릭시 기본 링크 동작이 수행되어, 주소창에 #이 찍히게 된다.

 

변경 전

import React, { useState } from 'react';

const Main = () => {
    const [ myName, setMyName ] = useState("Dev.MK")
        function changeName(e) {
            e.preventDefault();
            setMyName(myName === "Dev.MK" ? "개발자" : "Dev.MK");
        }

    return (
        <div>
            <h1>안녕하세요. {myName} 입니다.</h1>
            <a href="#" onClick={changeName}>Change</a>
        </div>
    );
};

export default Main;

 

변경 후

import React, { useState } from 'react';

const Main = () => {
    const [ myName, setMyName ] = useState("Dev.MK")
        function changeName(e) {
            e.preventDefault();
		        setMyName(myName === "Dev.MK" ? "개발자" : "Dev.MK");
        }

    return (
        <div>
            <h1>안녕하세요. {myName} 입니다.</h1>
            <a href="alert(1);" onClick={changeName}>Change</a>
        </div>
    );
};

export default Main;

e.preventDefault를 명시적으로 호출하여 기본 링크 동작을 막을 수 있다.

 

3. 여러가지 예제

인풋값 state에 넣기 + [확인]버튼클릭 알림창

import React, { useState } from 'react';

const EventModule = () => {
    const [inputVal, setInputVal] = useState('');
    return (
        <div>
            <input
                type="text"
                name="inputVal"
                placeholder="입력"
                value={inputVal}
                onChange={
                    (e) => {
                        setInputVal(e.target.value);
                    }
                }
            />
            <button onClick={
                ()=> {
                    alert(inputVal);
                    setInputVal('');
                }
            }>확인</button>
        </div>
  );
};

export default EventModule;

기본적으로 이벤트 리턴값에 e 를 써줄 경우 리액트의 이벤트 객체가 반환된다.

 

4. 동적인 공통 setState 만들기

import React, { useState } from 'react';

const EventModule2 = () => {

    const [inputValues, setInputValues] = useState({
        inputName: '',
        inputMsg: '',
    });
    
    const handleChange = (e) => {

        //e 이벤트 객체
        // target 이벤트가 발생한 HTML 요소
        const { name, value } = e.target;   //e.target에서 추출한 HTML 요소에서 name과 value 라는 두 개의 속성을 추출하고 이를 변수 name과 value에 할당

        setInputValues({
            ...inputValues, //inputValues  이객체의 모든 속성과 값을 얕은복사를 한다
            [name]: value,  //이벤트 핸들러 함수 내에서 현재 입력 필드의 이름과 값에 액세스하기 위해 사용
        });
    }
  
    const handleClick = () => {
        alert(inputValues.inputName + ' / ' + inputValues.inputMsg);
    }
  
    const handleReset = () => {
        setInputValues({
            inputName: '',
            inputMsg: '',
        });
    }
  
    return (
        <>
            <input
                type="text"
                name="inputName"
                value={inputValues.inputName}
                onChange={handleChange}
            />
            <input
                type="text"
                name="inputMsg"
                value={inputValues.inputMsg}
                onChange={handleChange}
            />
            <button onClick={handleClick}>값 확인</button>
            <button onClick={handleReset}>리셋</button>
      </>
    );
};

export default EventModule2;

 

출처

https://contentstoaster.tistory.com/entry/react-event-handler
https://goddaehee.tistory.com/302