5. 이벤트 처리

💨 이벤트 처리(헨들링) 방법 

 

1) 헨들링 함수 선언 

 

const App = () => {
  const handleClick = () => {
    alert("클릭");
  }
  return (
    <div>
      <button onClick={handleClick}>클릭!</button>
    </div>
  );
};

 

2) 익명 함수로 처리 

 

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 이벤트 

 

onClick, onChange, onKeyDown, onKeyUp, onFocus 등등 ... 

 

💨 DOM Input 값을 State에 저장하기 

 

const App = () => {
  const [inputValue, setInputValue] = 
  useState("defaultValue");
}

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

  return (
    <div>
      <input onChange={handleChange}
      defaultValue={inputValue} />
      <br />
      입력한 값은: {inputValue}
    </div>
  );
  };

 

event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.

현재  event의 target은 input element이므로 입력된 value를 가져와 setState 하는 모습이다.

 

✅ dynamic key 

 

object의 값을 변경할 때 보통 object.key = "value" 와 같이 작성하지만,

object["key"] = "value" 처럼 작성할 수 있으며 "key" 대신 다른 변수를 대입하여 다이나믹하게 값을 변경할 수 있다.

 

const object = {
    a: "내용1",
    b: "내용2",
    c: "내용3"
}
const key = "b";
object[key] = "값 변경!"
console.log(object); // { a: "내용1", b: "값 변경!", c: "내용3" }

 

EX)

 

const App = () => {
  const { user, value } = useState({ name: "멍식", school: "국민대학교"});

  const handleChange = (event) => {
    const { name, value } = event.target;
    constr newUser = { ...user };
    newUser[name] = value;
    setUser(newUser);
  }
}

 

 

💨 커스텀 이벤트 

 

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 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.