[FE 45] _23.05.23 _ Day 30 (React_State & Props)

click 이벤트 사용하기

 

- onClick

React 에서는 html과 다르게 이벤트에 camelCase를 사용한다.

 

리액트에서 클릭 이벤트를 처리하는 방법은 다음과 같습니다:

1. 이벤트 핸들러 함수를 작성합니다.
2. 이벤트 핸들러 함수를 컴포넌트의 요소에 연결합니다. 예를 들어, `<button>` 요소에 `onClick` 속성을 추가하여 클릭 이벤트를 처리하도록 설정합니다.
3. 이벤트 핸들러 함수에 매개변수를 전달하려면 콜백 함수를 사용합니다.

간단한 예제를 통해 이를 설명하면 다음과 같습니다:

//javascript
import React from 'react';

function handleClick() {
  console.log('버튼이 클릭되었습니다!');
}

function MyComponent() {
  return (
    <div>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

export default MyComponent;

위의 코드는 버튼을 클릭할 때 콘솔에 메시지를 출력하는 예제입니다. 

 

클릭 이벤트 핸들러 함수인 `handleClick`을 `<button>` 요소의 `onClick` 속성에 연결하여 클릭 이벤트를 처리하고 있습니다.

 

코드 실행 결과

위 코드를 실행 하기위해  준비 해야하는 환경

여기서 src/App.js 의 내용을 모두 지우고 Test 코드로 변경 후 npm start 명령어를 터미널에서 실행 시킨다.