[React.js] React state

static web page: read-only. ex) blogs

dynamic web page: read-write, interactive. ex) bank website

 

Event Listeners

순수 JS에서는 addEventListener() 함수를 이용해서 다양한 상호작용(클릭, 마우스 오버 등)을 구현합니다. 리액트에서는 비슷하지만 조금 다른 문법을 사용합니다.

 

JSX 내부에서 속성처럼 작성하는데 원하는 동작이 클릭인 경우를 예로 들어보겠습니다.

export default function Test() {
  const handleClick = (event) => {
    // something
  }
  
  return (
    <div>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

 

이벤트를 발생시키는 함수를 전달하는데 이때 앞에 on으로 시작합니다. 바로 함수를 작성할 수 있지만 코드를 분리해서 작성해야 가독성에 좋습니다.

주의 사항! 함수의 실행 형태가 아닌 함수 그 자체를 전달해야 합니다.

 

또한 함수는 이벤트 파라미터를 통해 해당 이벤트에 접근할 수 있습니다. 원하는 이벤트는 검색을 통해 쉽게 찾아볼 수 있습니다.

 

참고

https://react.dev/learn/responding-to-events

https://scrimba.com/learn-react-c0e