[React.js] CRA 기초 - input/입력값받기/이벤트핸들러

Latest update : 2021.04.19 - 수정 완료

---

CRA 기반 React.js

---

<React 문법>

1. input 기본

input 예시

import React, { useState } from 'react';

// state

let [inputText, setInputText] = useState(''); // 저장 공간 만들기

-------------------

// input tag

<input onChange={ (e)=>{ setInputText(e.target.value) } }>  // 뭔가 입력될 때 실행됩니다

tip) e.target >> 이벤트가 발생한 target 요소 / e.target.value >> 이벤트가 발생한 target value값

 

2. input 입력값 다른 state에 추가 (서버 저장 X)

import React, { useState } from 'react';

// state

let [sample, setSample] = useStat(['one', 'two', 'three']);
let [inputText, setInputText] = useState(''); // 저장 공간 만들기

-------------------

<div className="ex">
  <input onChange={ (e)=>{ setInputText(e.target.value) } }>  // 뭔가 입력될 때 실행됩니다
  <button onClick={ ()=>{
      var sampleDeepcopy = [...sample];
      sampleDeepcopy.unshift(inputText);
  }}>sample Array에 입력값 추가</button>
</div>

 

3. input event

 

원래 알던 이벤트에 추가로 알면 좋을 이벤트 (click, mouseover 등 생략)

이벤트	내용 (~할 때)
ondblclick	더블클릭
onmouseup / onmousedown	마우스 누름 / 뗌
onmousemove	마우스 움직임
oncontextmenu	마우스 우클릭 시 (메뉴 나오기 전)
onkeydown / onkeyup	키 누름 / 뗌
onkeypress	키 누른 상태
onblur	요소에서 포커스가 벗어남
onchange	값이 변경 (ex. input태그에 타이핑)
onsubmit / onreset	submit 버튼 누름 / reset 버튼 누름
onselect	input or textarea 안의 텍스트를 드래그하여 선택
onload	페이지 로딩 완료
onabort	이미지 로딩 중단
onunload	페이지 이동
onresize	요소 사이즈 변경
onscroll	스크롤

on을 다 붙였는데요,

jQuery에서는. on('click', function {~}) 식으로

html에서는 <div onclick=""> 식으로

react(js)에서는 onClick={} 식으로 쓰일 수 있습니다.

 

 

contextmenu 예시

  document.oncontextmenu = function(e) {
   alert("마우스 우클릭 방지");
   return false;
  }

 

 

 

이벤트 핸들러 : developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers

GlobalEventHandlers - Web API | MDN

이벤트 리스트 : developer.mozilla.org/en-US/docs/Web/Events#event_listing

Event reference | MDN