React 이벤트 처리

이벤트 핸들링 방법

1. 핸들링 함수 선언

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

2. 익명 함수로 처리

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

많이 사용되는 DOM 이벤트

• onClick : 엘리먼트 클릭 시
• onChange : 엘리먼트 내용 변경 시 (input 텍스트 변경, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress : 키보드 입력 발생 시
• onDoubleClick : 엘리먼트 더블 클릭 시
• onFocus : 엘리먼트에 focus 되었을 때
• onBlur : 엘리먼트가 focus를 잃었을 때
• onSubmit : form 엘리먼트에서 submit 발생 시

컴포넌트 내 이벤트 처리

---

DOM 버튼 클릭 이벤트 예제

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

DOM input 값을 state에 저장하는 예제

const App = () => {
  const [inputValue, setInputValue] = useState("defaultValue");
  
  // 핸들링 함수 내에서 state에 저장
  const handleChange = (event) => {
  	setInputValue(event.target.value);
  }
  
  return (
    <div>
      <input onChange={hadleChange} defaultValue={inputValue} />
      <br />
      입력한 값은: {inputValue}
    </div>
  );
};

여러 input 동시에 처리하는 예제

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

const App = () => {
  // state를 object로 생성
  const [user, setUser] = useState({ name; "민수", school: "엘리스대학교" });
  
  const handleChange = (event) => {
    // 이벤트 발생한 input의 name, value 가져오기
    const { name, value } = event.target;
    
    // 객체 자체를 변경해줌
    const newUser = { ...user };
    newUser[name] = value;
    setUser(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>
  );
};

다른 컴포넌트로 이벤트 전달

---

컴포넌트간 이벤트 전달

사용자가 입력한 정보를 부모 컴포넌트에서 활용해야할 경우, 이벤트를 Props로 전달하여 처리할 수 있다.

// 부모 컴포넌트
const App = () => {
  const [username, setUsername] = useState('')
  
  return (
    <div>
      <h1>{username}님 환영합니다.</h1>
      // onChange 이벤트를 props로 전달
      <MyForm
        onChange={(event) => {
        	setUsername(event.target.value)
        }}
      />
    </div>
  )
}

// MyForm 컴포넌트
// 전달받은 onChange로 이벤트 설정
const MyForm = ({ onChange }) => {
  return (
    <div>
      <span>이름: </span>
      <input onChange={onChange} />
    </div>
  )
}

커스텀 이벤트

DOM 이벤트를 활용하는 걸 넘어서 나만의 이벤트를 만들 수도 있다.

// 부모 컴포넌트
const App = () => {
  return (
    <div>
      // 나만의 이벤트 onSOS를 props로 전달
      <SOS onSOS={() => { alert("긴급사태!"); }} />
    </div>
  );
};

// SOS 컴포넌트
const SOS = ({onSOS}) => {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    // 3번 누르면 전달받은 onSOS 이벤트 실행
    if(count >= 2) {
    	onSOS();
    }
    
    // 2번 이하로 누르면 카운트 세기
  	setCount(count + 1);
  }
  
  return <button onClick={handleClick}>
  	세 번 누르면 긴급호출({count})
  </button>
}

이벤트 명명법

직접 이벤트를 만들 경우, 이름을 자유롭게 설정할 수 있다.
보통 on + 동사 / on + 명사 + 동사 형태로 작성한다.
(onClick, onButtonClick, onInputChange 등)

이벤트 핸들러에 매개변수 전달하기

---

아래와 같이 이벤트를 등록했을 경우를 보자.

<button onClick={handleClick}></button>

이벤트 핸들러에 매개변수를 전달하고 싶다면, 이런 식으로 작성하면 될까?

<button onClick={handleClick(d)}></button>

이렇게 연결하는 경우 이벤트가 호출되는 것으로 간주하여 바로 실행되고, 제대로 연결이 되지 않는다.

따라서 화살표 함수를 이용한 콜백 함수의 형태로 전달해야한다.

<button onClick={() => handleClick(d)}></button>