React hooks 리액트 훅 이벤트 처리란? 사용방법

React hooks 리액트 훅 이벤트 처리란? 사용방법

 

오늘은 리액트 훅에서 이벤트 처리하는 방법을 알아보겠습니다

이러한 이벤트를 처리하는 함수들을 이용하여, 

개발자는 유저로부터의 Input을 받아서 저장, 사용 가능하고,

유저는 이러한 기능을 통해 홈페이지와 상호작용 가능합니다.

오늘은 수많은 이벤트 처리 함수 중 대표적인 두 가지를 파헤쳐보려 합니다.

오늘도 역시 전혀 비전문적이고 쉽게 알아보겠습니다.

 

목차.

1. onClick 이벤트란?
2. onChange 이벤트란?
3. 마치며.

 

1. onClick 이벤트란?

 

onClick 이벤트는 아마 가장 흔하며 자주 사용되는 이벤트이지 않을까 생각합니다.

이는 말 그대로 클릭 시 어떠한 이벤트를 발생시킨다는 뜻입니다.

예를 들면 로그인, 로그아웃 등등의 버튼이 있겠습니다.

하지만 꼭 버튼일 필요는 없습니다.

간단하게 필요한 JSX의 태그에 onClick 이벤트를 작성해주시면 됩니다.

그렇다면 아래의 코드를 보겠습니다.

 

import React from 'react';

const App = () => {
  return (
    <div className='App'>
      <button onClick={() => console.log('hello')}> click Me</button>
    </div>
  );
};

export default App;

 

이벤트 함수는 항상 콜백 함수를 필요로 합니다.

즉 현재의 코드는 버튼을 누르면 "hello"라는 로그를 출력시키는 함수입니다.

 

자 그럼 결과를 보겠습니다.

현재 아래의 코드는 상단의 코드가 렌더링 된 결과입니다.

click Me라는 버튼이 보이고 개발자 툴에는 아직 아무런 로그도 없습니다.

 

자 그럼 버튼을 누른 결과 값을 보겠습니다.

아래의 사진을 보시면 hello라고 출력된 걸 보실 수 있습니다.

하지만 아래와 같이 코드를 작성한다면,

현재와 같이 짧은 코드는 괜찮지만, 코드가 길어진다면

가독성은 정말 최악일 것입니다.

onClick={() => console.log('hello')}

 

그러하여 함수를 작성한 후,

그 변수를 이벤트 함수 안의 콜백 함수로 사용해주는 것이 좋습니다.

아래와 같이 말입니다.

이때 주의해 주세요!!

sayHello와 같이 arrow function을 작성하시고,

별다른 로직 없이 바로 리턴을 요하신다면, 중괄호는 생략 가능합니다.

또한 JSX안에 sayHello()와 같이 적지 않도록 주의해주세요.

변수가 아닌 함수로 바로 주게 된다면 리액트는 렌더링 후

즉각 실행시켜야 하는 함수로 간주하여, 버튼을 누르지 않았더라도

처음에 한번 실행됩니다. 그러니 상황에 따라 괄호를 붙일 것인지 

없앨 것인지 결정하시면 됩니다.

 

import React from 'react';

const App = () => {

  const sayHello = () => console.log("hello");

  return (
    <div className='App'>
      <button onClick={sayHello}> click Me</button>
    </div>
  );
};

export default App;

이에 대한 결괏값은 처음의 코드와 동일합니다.

 

이러한 onClick 함수는 위에서 설명했듯 버튼 태그뿐 아닌

모든 태그에 사용 가능합니다. 또한 제가 보여드린 로그를 작성하는

코드뿐 아니라 로그인, 로그아웃, Like, 슬라이더 버튼 등등

아주 다양하게 사용될 수 있습니다.

 

2. onChange 이벤트란?

 

onChange 이벤트는 Input 태그와 같이 사용되는 경우가 많습니다.

이로써 개발자는 유저가 입력한 값을 onChange라는 이벤트를 사용하여,

useState에 저장할 수도 있습니다. 예를 들어 이는 로그인 중 아이디와

비밀번호 등을 받을 때 사용할 수 있습니다.

아래의 예시를 보겠습니다.

이 코드는 유저가 input 태그에 어떠한 값을 입력하면,

아래의 p 태그로 인해 그 값들이 한번 더 출력될 것입니다.

 

 

 

import React, {useState} from 'react';

const App = () => {
  const [username, setUsername] = useState();

  const setUsernameHandler = event => setUsername(event.target.value);
  const sayHello = () => console.log("hello");

  return (
    <div className='App'>
      <input onChange={}></input>
      <button onClick={sayHello}> click Me</button>
      <p>{username}</p>
    </div>
  );
};

export default App;

 

아래의 사진은 현재 코드가 렌더링 된 값입니다.

input 태그가 있고, 버튼이 있습니다.

예상대로라면 유저가 input 태그에 무언가 입력을 하면,

onChange함수가 변경사항마다 이벤트를 발생시킵니다.

현재의 경우  setUsernameHandler입니다.

setUsernameHandler는 input 태그로부터의 값을

setUsername으로 저장시켜주며, 이는 username이라는

변수로 그 값을 사용 가능합니다.

 

 

어떤가요?? hello world를 작성하니 아래에도 똑같은 값이

실시간으로 입력되었습니다.

이로써 우리는 로그인할 때 혹은 검색창에서 검색할 때,

등등 여러 방면에서 유저가 입력한 값을 받을 수 있을 것입니다.

이 onChange 또한 onClick과 같이 다양한 태그에서 사용이 가능합니다.

하지만 대부분 input 태그와 좋은 케미를 보입니다.

onChange는 어떠한 변화가 있을 때마다 이벤트를 발생시킵니다.

즉 유저가 hello world를 작성하는 동안 각각의 알파벳과 띄어쓰기에

onChange 이벤트가 발생된 것을 의미합니다.

 

3. 마치며.

 

사실 이러한 이벤트 처리는 조금만 익숙해지면 

큰 문제없이 사용 가능하시리라 생각됩니다.

그럼에도 여러분께 이러한 기초를 보여드리려는 이유는,

언제든지 헷갈리거나 기억이 잘 나지 않을 때 보실 수 있게

하기 위함입니다.

이러한 자바스크립트의 이벤트 함수들, 

현재 리액트 이벤트 처리 방식이 없었다면,

현재의 홈페이지는 심심해서 그 누구도 사용하지 않았을 것입니다.

블로그, 홈페이지 등등 그냥 사용할 당시는 크게 느끼지 못했지만,

스스로 코드를 작성하시며 연습하신다면, 이러한 기능들이

얼마나 많고 넓은 범위에서 사용 가능하고 작동되는지 감이 오실 것입니다.

 

항상 시작이 반입니다.

무언가 시작하는 것이 용기 있는 것입니다.

그리고 꾸준히 해나 간다는 건 끈기 있는 것이겠지요.

항상 하시는 일 혹은 하고 싶으신 일 모두 다 이루시고

항상 건강하고 도전하시길 바라겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.