분류 Reactjs

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

컨텐츠 정보

  • 조회 371 (작성일 )

본문

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


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


간단한 행동을 해봅시다.

  • 버튼 만들기
  • 클릭 듣기
  • 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>
  );
}

이제 버튼을 클릭하여 자동으로 메시지 업데이트를 확인하십시오!


wtsv2ovcht2uacfpx6qe.png 


wtsv2ovcht2uacfpx6qe.png 


React 상태를 사용하여 변수를 쉽게 업데이트하고 React가 뷰를 업데이트 하도록 할 수 있습니다!


요점 반복 


우리가 만난 모든 React 개념을 보기 위해 반복 해 봅시다.

  • react.js와 react-dom.js를 사용하여 React 앱 시작하기
  • 렌더링 ReactDOM.render를 사용하여 HTML div에 반응합니다.
  • React 데이터 디스플레이 
  • React 이벤트 듣기
  • React state 사용하기
  • 변수 업데이트 및 React UI 업데이트

우리는 React의 주요 개념을 많이 다루었습니다. 이러한 기본 개념은 앞으로 만들 모든 React 앱에서 사용됩니다!


결론 


우리는 이 Getting Started with React 기사로 겉모습을 맛보았습니다. 이 React Starter Guide에 따라 세계에서 가장 유명한 JavaScript 라이브러리에 대해 더 자세히 알아보십시오.


이 React 시동기 전반에 걸쳐 우리는 훨씬 더 깊이 들어가고 다음과 같은 것들로 뛰어들 것입니다 :


  • React 애플 리케이션을 여러 가지 방법으로 구현
  • 구성 요소에 대해 말하기
  • 앱 라우팅
  • 양식 및 유효성 검사
  • Redux
  • Sass 및 CSS-in-JS로 구성 요소 스타일 지정
  • 애니메이션
  • 그리고 훨씬 더 ...