React #3

• 4장 컴포넌트
  • 이벤트를 사용할 때 주의 사항
  • 이벤트 이름은 카멜 표기법으로 작성합니다
  • 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다
  • DOM요소에만 이벤트를 설정할 수 있습니다.
    • div, button, input, form, span등에 설정 할 수 있습니다
    • 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다.
  • 리액트에서 지원하는 이벤트 종류
    • clipboard
    • composition
    • keyboard
    • focus
    • form
    • mouse
    • selection
    • touch
    • ui
    • wheel
    • media
    • image
    • animation
    • transition
• onChange
  • 코드(hello-react-EventPractice.js)
  • import React from "react"; const EventPractice = () => { return ( <div> <h1>이벤트 연습</h1> <input name="message" placeholder="아무거나 입력해보세요" onChange={(e) => { console.log(e); console.this(e.target.value); }} /> </div> ); };
  • input에 값이 변할 때마다 console.log에 찍힌다
  • 바닐라 JS의 onChange와 차이가 있음 바닐라는 focus가 벗어날때만 change를 하게된다
• state에 input 값 넣기
  
  • import React, { Component } from "react"; class EventPractice extends Component { state = { message: "", }; render() { return ( <div> <h1>이벤트 연습</h1> <input type="text" name="message" placeholder="입력" value={this.state.message} onChange={(e) => { this.setState({ message: e.target.value, }); }} /> <h2>{this.state.message}</h2> </div> ); } } export default EventPractice;
  • state에 message를 value값을 넣고 <h2>에서 {this.state.messgae}를 확인 할 수 있다.
• 5장 ref
• 4장 컴포넌트
  • 이벤트를 사용할 때 주의 사항
  • 이벤트 이름은 카멜 표기법으로 작성합니다
  • 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다
  • DOM요소에만 이벤트를 설정할 수 있습니다.
    • div, button, input, form, span등에 설정 할 수 있습니다
    • 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다.
  • 리액트에서 지원하는 이벤트 종류
    • clipboard
    • composition
    • keyboard
    • focus
    • form
    • mouse
    • selection
    • touch
    • ui
    • wheel
    • media
    • image
    • animation
    • transition
• onChange
  • 코드(hello-react-EventPractice.js)
  • import React from "react"; const EventPractice = () => { return ( <div> <h1>이벤트 연습</h1> <input name="message" placeholder="아무거나 입력해보세요" onChange={(e) => { console.log(e); console.this(e.target.value); }} /> </div> ); };
  • input에 값이 변할 때마다 console.log에 찍힌다
  • 바닐라 JS의 onChange와 차이가 있음 바닐라는 focus가 벗어날때만 change를 하게된다
• state에 input 값 넣기
  
  • import React, { Component } from "react"; class EventPractice extends Component { state = { message: "", }; render() { return ( <div> <h1>이벤트 연습</h1> <input type="text" name="message" placeholder="입력" value={this.state.message} onChange={(e) => { this.setState({ message: e.target.value, }); }} /> <h2>{this.state.message}</h2> </div> ); } } export default EventPractice;
  • state에 message를 value값을 넣고 <h2>에서 {this.state.messgae}를 확인 할 수 있다.
• 5장 ref