react 학습노트 | 3.EventHandling

eventHandling

• react의 component는 상태를 가지고, 상태의 변화에 따라 컴포넌트가 리 랜더링됨
  • 즉, 리엑트 컴포넌트의 상태를 변경시키는 무언가가 있다.
    • 그 무언거의 대부분이 바로 이벤트
• javaScript의 event와 약간차이는 있으나 비슷하다.
  • react도 결국 javaScript다.
• JSX에선 카멜케이스로 구성된 속성에 이벤트 함수를 넣는다.

  • <button onClick={handleClick}>Button </buttonn>

---

• react의 이벤트에선 이벤트함수가 호출되면 인자로 SyntheticEvent 객체가 전달됨
  • SyntheticEvent는 javascript의 event 객체를 래핑한 객체임.
  • 거의 유사한 인터페이스를 가지고 있음
  • 원본 이벤트 객체도 접근 가능 SyntheticEvent.nativeEvent

eventHandler함수를 만들때는 react lifecycle을 고려해야한다.

• 컴포넌트 내부에서 함수를 만들면 리랜더링 될때마다 새로 함수가 쓰여진다.
  • 이게 필요한 순간도 있겠으나 아닌 순간도 있다.
  • 새로 함수를 쓸 필요가 없다면 컴포넌트 외부에서 이벤트 핸들러 함수를 만들자.
  • 또는 useCallback으로 감싸주면 리랜더링을 피할 수 있다.

import { useCallback } from "react";

// 컴포넌트 외부에 함수 선언
function handleClickOutOfComponent(e) {
  console.log("click2", e);
}

function App() {
  // 컴포넌트 내부의 함수 
  function handleClick(e) {
    console.log("click1", e);
  }
  const handleChange = useCallback((e) => {
    console.log("change", e.target.value);
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Button1</button>
      <button onClick={handleClickOutOfComponent}>Button2</button>
      <div>
        <input type="text" onChange={handleChange} />
      </div>
    </div>
  );
}
export default App;

---

이벤트의 종류

Mouse event

• onClick : 마우스 클릭 (down + up )
• onMouseDown : 버튼 누를시
• onnMouseUp : 버튼 뗄시
• onMouseEnter : 요소 밖에서 안으로 마우스 커서가 들어감
• onMouseLeave : 요소 안에서 밖으로 마우스 커서가 나감
• onMouseMove : 요소 안에서 마우스 커서가 움직임

Keyboard event

• onKeyDown : 키를 눌렀을때 (물리적인 키에 반응)
• onKeyUp : 키를 떼었을때
• onKeyPress : 키를 눌러서 문자가 입력될때(눌린 문자에 반응함)

Focus, Form event

• Focus
  • onFocus : 요소가 포커스 될때
  • onBlur : 요소의 포커스가 사라질경우
• Form
  • onChange : 요소의 값이 변경될때

그외

• 필요할때마자 찾아가면서 사용하도록하자.

---

Form 요소 컨트롤

• Form 요소를 컨트롤할때는 이벤트를 자주 사용한다.

Controlled Component

• 제어 컴포넌트 라고도 함.
• React에 의해 입력 요소 값이 제어되는 컴포넌트

import { useState } from 'react';

function TextArea() {
  const [textAreaVal, setTextAreaVal] = useState('');

  console.log('[TextArea] render', value);

  return (
    <textarea
      value={textAreaVal}
      onChange={(e) => {
        setTextAreaVal(e.target.value);
      }}
    />
  );
}

export default TextArea;

• 위 코드에서 textArea는 value 속성에 textAreaVal 스테이트 값을 넣어줌
• onChange 에서는 setTextAreaVal를 호출함
• 유저가 값을 입력하면 state에 유저의 입력이 반영 되면서 상태가 업데이트됨

장점

• 컴포넌트의 state 와 input value가 완전히 동일함(신뢰가능한 단일 출처)
• 다른 컴포넌트에 input value를 전달하거나 다른 이벤트 핸들러에서값을 재설정 할 수 있음

단점

• 값이 변경되는 매 순간 렌더링이 됨
• 컴포넌트의 영향 범위가 클수록 성능 저하됨

Uncontrolled Component

• Controlled Component와는 반대로 input value를 컴포넌트 State에 연결하지 않고 사용하는 컴포넌트
• 값은 dom을 통해 가져온다.
  • ex: document.querySelector('#{id}').value
• useRef를 사용해 가져올 수 도 있다.
  • useRef는 Hooks의 한 종류. 특정 요소의 레퍼런스를 직접 가져올때 사용
  • 연결된 값이 변경되더라도 리랜더링이 되지 않는다.

import { useRef } from 'react';

function UncontrolledTextInput() {
  const inputRef = useRef(); //1. useRef를 이용해 ref를 만든다.

  console.log('[UncontrolledTextInput] render');

  return (
    <>
    /* jsx에서 ref속성에 연결한다.  */
      <input ref={inputRef} type="text" id="input" />
      <button
        onClick={() => {
          console.log(inputRef.current.value);
        }}
      >
        Get value
      </button>
    </>
  );
}

export default UncontrolledTextInput;

---