[React] 리액트에서 이벤트를 다루는 방법

🎯 리액트에서 이벤트 다루는 방법

• 리액트에서 이벤트의 이름은 카멜(Camel) 표기법으로 사용한다.
• 문자열이 아닌 JSX 함수명으로 전달한다. (onClick={함수명})

 

📝 이벤트 처리(핸들링) 방법

• 이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 아래 onClick처럼 함수의 형태로 객체를 전달한다.

 

📕 핸들링 함수 선언

const App = () => {
    const handleClick = () => {
        alert("클릭했습니다.");
    }
    return (
        <div>
            <button onClick={handleClick}>클릭하세요</button>
        </div>
    );
};

• 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법

 

📕 익명 함수로 처리

const App = () => {
    return (
        <div>
            <button onClick={() => { alert('클릭했습니다.') }}>클릭하세요</button>
        </div>
    )
}

• 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법

 

📝 이벤트 객체

const App = () => {
    const handleChange = (event) => {
      console.log(event.target.value + "라고 입력하셨네요.");
    }
    return (
    <div>
      <input onChange={handleChange} />
    </div>
    );
};

• DOM Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다.
• 이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.
• 이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button, form, input 등)에 따라 전달되는 이벤트 object의 내용도 다르니 유의할 것.

 

📕 DOM요소에만 이벤트 설정 가능

// 이렇게 사용 못 한다.
<EventPractice onLoad={ ()=> { console.log("test"); } }/>

• 직접 만든 리액트 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
• <div> <button> <p> <input> 등 DOM요소에만 이벤트를 사용할 수 있다.

 

📝 많이 쓰이는 DOM 이벤트

• onClick : Element를 클릭했을 때
• onChange : Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때
• onDoubleClick : Element를 더블 클릭했을 때
• onFocus : Element에 Focus 되었을 때
• onBlur : Element가 Focus를 잃었을 때
• onSubmit : Form Element에서 Submit 했을 때

 

📝 컴포넌트 내 이벤트 처리

📕 DOM 버튼 클릭

const App = () => {
    const handleClick = () => {
        alert("클릭했습니다.");
    }
    return (
        <div>
            <button onClick={handleClick}>클릭하세요</button>
        </div>
    );
};

 

📕 DOM Input 값을 State에 저장하기

const App = () => {
    const [inputValue, setInputValue] = useState("defaultValue");
    const handleChange = (event) => { 
        setInputValue(event.target.value);
    }
    return (
        <div>
            <input onChange={hadleChange} defaultValue={inputValue} />
            <br />
            입력한 값은: {inputValue}
        </div>
        );
};

• event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.
• 현재 event의 target은 input element이므로 입력된 value를 가져와 setState를 하는 모습이다.

 

📝 여러 Input 동시에 처리하기, 한 개의 이벤트 핸들러를 여러 Element에 재사용하기 :: object의 key를 동적으로 할당

const App = () => {
    const [user, setUser] = useState({ 
        name; "철수",
        school: "한국대학교" 
    });

    const handleChange = (event) => {
        const { name, value } = event.target;

        // 방법 1
        // const newUser = { ...user };
        // newUser[name] = value;
        // setUser(newUser);

        // 방법 2
        setUser((current) => {
        const newUser = {...current};
        newUser[name] = value;
        return newUser;
    })
    };

    return (
        <div>
        <input name="name" onChange={handleChange} value={user.name} />
        <br />
        <input name="school" onChange={handleChange} value={user.school} />
        <p>
            {user.name}님은 {user.school}에
            재학중입니다.
        </p>
    </div>
    );
};

• State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법이 있다.
• target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.

 

📝 컴포넌트 간 이벤트 전달하기

// 자식
const MyForm = ({ onChange }) => {
    return (
        <div>
            <span>이름: </span>
            <input onChange={onChange} />
        </div>
    )
}

// 부모
const App = () => {
    const [username, setUsername] = useState('')
    return (
        <div>
            <h1>{username}님 환영합니다.</h1>
            <MyForm onChange={(event) => { setUsername(event.target.value) } }/>
        </div>
    )
}

• 사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우 예시와 같이 이벤트를 Props로 전달하여 처리할 수 있다.

 

📝 커스텀 이벤트

const SOS = ({onSOS}) => {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        if(count >= 2) {
            onSOS();
        }
        setCount(count + 1);
    }

    return <button onClick={handleClick}>세 번 누르면 긴급호출({count})</button>
}

const App = () => {
    return (
        <div>
            <SOS onSOS={() => { alert("긴급사태!"); }} />
        </div>
    );
};

• 단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.

 

📝 이벤트 명명법

const App = () => {
    const handleClick = () => {
        alert("클릭했습니다.");
    }

    return (
        <div>
            <button onClick={handleClick}>클릭하세요</button>
        </div>
    );
};

• 직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다.
• 그러나 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 on + 동사 또는 on + 명사 + 동사 형태로 작성한다.
• 예시: onClick, onButtonClick, onInputChange
• 핸들링 함수의 경우 마찬가지로 handle + 동사 또는 handle + 명사 + 동사의 형태로 작성하며, handle 대신 이벤트명과 동일한 on을 앞에 붙여도 무방하다.