무대 뒤에서 React의 버튼은 순수한 JavaScript 버튼처럼 동작합니다. 단추를 참조하는 변수를 만들지 않고 단추에 이벤트를 직접 넣을 수 있다는 장점이 있습니다.

전제 조건

: React 코드를 편안하게 읽을 수 있도록 일반 함수를 화살표 함수로 변환하는 데 도움이 되는 동영상입니다.

의도한 결과

그림 1: 2개의 버튼이 있는 간단한 페이지.


그림 2: 앱 계층 다이어그램.

전설:

🟦 파란색: 우리가 만든 구성 요소.

◻️ 회색: 일반 태그.

시작하기

React에서 버튼 이벤트를 생성하는 방법은 여러 가지가 있지만 2번에 집중해 보겠습니다. 인수를 전달하지 않고 함수를 호출하려는 경우 또는 인수를 전달해야 하는 경우에 따라 다릅니다.

Calling a function without passing arguments

Calling a function that needs to pass arguments

인수를 전달하지 않고 함수 호출:

export default function App() {
  function myFunction() {
    alert("You click me");
  }

  return (
    <div className="App">
      <button onClick={myFunction}>Click me</button>
    </div>
  );
}

코드를 분석해 보겠습니다.

function myFunction() {} 버튼을 클릭하면 호출되는 함수입니다.

onClick={myFunction} onClick 속성은 전달하는 함수를 실행합니다.

참고: onClick 내부의 함수에는 괄호를 넣지 않습니다. 이렇게 하면 페이지가 로드될 때 기능이 실행되고 사용자가 버튼을 클릭해도 버튼이 작동하지 않습니다.

인수를 전달해야 하는 함수 호출:

export default function App() {
  function myGreet(name) {
    alert(`Hello ${name}`);
  }

  return (
    <div className="App">
      <button onClick={() => myGreet("Ana")}>Click me</button>
    </div>
  );
}

코드를 분석해 보겠습니다.

function myGreet(name){} 실행할 함수에 인수가 있습니다.

onClick={() => myGreet("Eduardo")} 함수를 인수와 함께 전달하려면 onClick 이벤트 내에서 즉석에서 함수를 생성해야 합니다. 사용자가 버튼을 클릭하면 화살표 함수가 호출되어 그 안에 있는 모든 코드가 실행됩니다.

화살표 기능이 결실을 맺는 곳입니다. 이렇게 하면 JSX가 지저분해지지 않도록 더 짧은 구문을 작성할 수 있습니다.

마지막으로 원하는 만큼 인수를 전달할 수 있습니다. 그러나 조직화하려면 1~2개의 인수를 고수하십시오. 더 많은 인수를 전달해야 하는 경우 더 나은 구성을 위해 객체 또는 배열을 사용하십시오.

결론

이 문서에서는 버튼을 사용하여 상태를 조작하여 화면의 정보를 수정하는 방법을 연습할 수 있습니다.

다음 기사는 사용자가 애플리케이션에 데이터를 제출할 수 있도록 상태에 대해 자세히 설명합니다.

완성된 코드를 보고 싶다면 이것을 열고link 분기 버튼을 엽니다.

추가 읽기

Handling Events 공식 React 문서

학점:

표지 사진: Photo by Matthew T Rader on Unsplash