댓글 검색 목록

[Reactjs] React강좌 - 3 - React 시작하기 (2019 판) III

페이지 정보

작성자 운영자 작성일 19-07-30 15:36 조회 514 댓글 0

사용자 상호 작용 처리 (이벤트)

이제 우리는 몇 가지 데이터를 보여주었습니다. 모든 앱의 다음 단계는 사용자 입력을 듣고 그에 대한 조치를 취하는 것입니다. 우리는 버튼 클릭과 같은 이벤트를 듣게 될 것입니다.

간단한 행동을 해봅시다.

버튼 만들기
클릭 듣기
setMessage 함수를 사용하여 메시지 업데이트

버튼 만들기

<h1> 옆에 버튼을 추가합니다. React는 항상 부모 요소를 1 개만 원한다는 것을 기억하십시오. 우리는 주위에 <div>를 추가하여 부모 요소가 하나만 존재하도록 합니다.

클릭하면 메시지를 업데이트하는 버튼을 만듭니다. 클릭하면 기능을 수행하는 버튼을 갖도록 앱 구성 요소를 업데이트하십시오.

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button>
        Update the Message!
      </button>
    </div>
  );
}

클릭 듣기

HTML에서 DOM의 각 요소는 클릭, 마우스 오버, 키 누르기 등과 같은 이벤트를 방출 할 수 있습니다.

React의 한 요소에서 이벤트를 수신하기 위해 이벤트 앞에 on을 추가합니다. 예를 들어 이 버튼을 클릭 한 번 듣고 싶으면 onClick에 대한 속성을 추가합니다.

<button onClick={}>Click Me!</button>

onClick에서 중괄호를 사용하여 JSX에게 {} 안에 무엇이 있는지 평가할 필요가 있다고 알려줍니다.

대괄호 {}를 열 때마다 React에 JavaScript로이 영역을 평가하도록 지시합니다.

setMessage를 사용하여 메시지를 업데이트 할 수 있도록 onClick에 함수를 추가해 보겠습니다.

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('my new message')}>
        Update the Message!
      </button>
    </div>
  );
}

onClick 핸들러에 대해 더 자세히 살펴 보겠습니다. JSX에서 React가 JavaScript로 평가되기를 원할 때마다 대괄호 {}를 열 것이다. 버튼을 클릭 할 때 함수를 실행하기 때문에 대괄호를 열고 함수를 제공합니다.

이것은 템플릿 외부에서 함수를 작성하여 작성할 수도 있습니다. 다음은 같은 효과가 있지만 템플릿을 보다 깨끗하게 유지합니다.

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  function handleClick() {
    setMessage('my new message')
  }

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>
        Update the Message!
      </button>
    </div>
  );
}