6.12 Dev.Feedback(React #4 이벤트 처리)

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다. 단, 두 가지 문법 차이가 있는데,

• React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용해야 한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다.

예시를 들어보면, HTML에서는 event를 처리하는 방식은 아래와 같은데

<button onclick="handleEvent()">Event</button>

React에선 조금의 차이점을 볼 수 있다.

<button onClick={handleEvent}>Event</button>

// onclick ==> onClick (camel case 적용)
// handleEvent() ==> {handleEvent} (JSX를 적용하여 함수를 중괄호 안에 넣어줌)

이벤트 종류 관련해서는 기존에 작성한 문서를 통해 확인해볼 수 있다.

https://newfind.tistory.com/51

6.05 Dev.Feedback (이벤트 정리)

근데 그 중 몇가지만 예시를 들어가며 정리해본다.

 

onChange

<input> <textarea> <select> 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용된다. React 에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트한다.

onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다.

 

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      // 컴포넌트 return 문 안의 input 태그에 value 와 onChange 를 넣어주었다.
      // onChange 는 input 의 텍스트가 바뀔때 마다 발생하는 이벤트인데,
      // 이벤트가 발생하면 handleChange 함수가 작동하며, {handleChange} 를 통해
      // 이벤트 객체에 담긴 input 값인 name을 setName을 통해 새로운 state 로 갱신한다.
      <h1>{name}</h1>
    </div>
  )
};

 

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다. 버튼이나 <a> tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때에 자주 사용하는 이벤트인데, 위의 onChange 예시에 버튼을 추가하여 버튼 클릭 시 input tag 에 입력한 이름이 alert을 통해 알림창이 팝업되도록 코드를 추가할 수 있다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      
 // onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링될 때 
 // 함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용된다.
 //	때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링될 때에 alert 이 실행되고 
 // 따라서 그 결과인 undefined (함수는 리턴값이 없을 때 undefined 를 반환)
 // 가 onClick 에 적용되어 클릭했을 때 아무런 결과도 일어나지 않게 된다.
 
      <h1>{name}</h1>
    </div>
  );
};

 // 따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 
 // 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 
 // 이벤트에 함수 자체를 전달해야 한다.
 
 // 함수 정의하기 //

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};
  
 // 단, 두 가지 방법 모두 arrow function 을 사용하여 함수를 정의하여야 하는데,
 // 그래야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있기 때문이다.