React

React #3

DGeon 2023. 5. 8. 09:08
  • 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