리액트 공부 - 화살표함수 / 리액트이벤트 (종류) / onChange / onClick / state 예외 / ref

 

*

화살표 함수 

 

setTimeout(function(){

console.log(“1”);

}, 1000);

 

setTimeout(() => {

console.log(“1”)

}), 1000);

 

화살표 함수는 기존 function과는 용도가 다르다

서로 가리키는 this 값도 다르다 

 

일반 함수: 자신이 종속된 객체를 this로 가리킴

화살표 함수: 자신이 종속된 인스턴스를 this로 가리킴 

function BlackDog() { this.name = ‘흰둥이’; return { name: ‘검둥이’, bark: function(){ // 우리거  console.log(this.name + ‘: 멍멍!’); } } }  const blackDog = new BlackDog(); blackDog.bark(); // 검둥이: 멍멍

function BlackDog() { this.name = ‘흰둥이’; return { name: ‘검둥이’, bark: () => { // 멀리있는거  console.log(this.name + ‘: 멍멍!’); } } }  const blackDog = new BlackDog(); blackDog.bark(); // 흰둥이: 멍멍

*

state를 constructor에서 꺼내기 

 

원래 state 초기값은 constructor 메소드에서 정의해야 하지만 

 

    constructor(props) { //컴포넌트의 생성자 메소드 

        //이 내부에서 state 초깃값 설정 

        super(props);

        this.state={

            number: 0 //초기값 0으로 설정 

        }

    }

 

transform-class-properties 문법으로 constructor 바깥에서 정의 가능 

 

    state = {

        number: 0

    }

 

초기값 state = {number: 0} 

업데이트 this.setState({ number: this.state.number + 1 })

 

*
리액트 이벤트 

 

이벤트 이름은 camelCase 즉 붙는 단어마다 첫글자 대문자로

html onclick → onClick 

html onkeyup → onKeyUp 

 

이벤트에 실행할 함수 값 전달 

DOM 요소에만 이벤트 설정 (div button input form span) 

즉 컴포넌트 자체 이벤트 설정 불가 

단, 전달받은 props를 컴포넌트 내부 DOM 이벤트로 설정은 가능 

<div onClick={this.props.onClick}>{ /* (. . .) */ }</div>

 

이벤트 종류

Clipboard Form Composition Mouse Keyboard Selection Focus Touch UI Image Wheel Animation Media Transition 

 

http://facebook.github.io/react/docs/events.html

 

*

이벤트 예시 

 

App.js

 

import React, { Component } from 'react';

import EventPractice from './EventPractice';

 

class App extends Component {

  render() {

    return(

      <EventPractice />

    );

  }

}

export default App;

 

EventPractice.js

 

            <div>

                <h1>이벤트 연습 </h1>

                <input 

                    type="text"

                    name="message"

                    placeholder="아무거나 입력해보세요"

                    onChange={

                        (e) => {

                            console.log(e.target.value);

                        }

                    }

                />

            </div>

 

e = SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체 

네이티브 이벤트 / 인터페이스 동일. 

순수 자바스크립트에서 HTML 이벤트 다룰때와 똑같이 사용 

 

input type에 쓰이는게 그대로 나타남 실시간으로 

 

EventPractice.js:14 이

EventPractice.js:14 일

EventPractice.js:14 이

EventPractice.js:14 이러

EventPractice.js:14 이럼

EventPractice.js:14 이러

EventPractice.js:14 이러며

EventPractice.js:14 이러면

EventPractice.js:14 이러면 

EventPractice.js:14 이러면 ㅇ

EventPractice.js:14 이러면 오

EventPractice.js:14 이러면 와

EventPractice.js:14 이러면 왕

EventPractice.js:14 이러면 와

EventPractice.js:14 이러면 와우

EventPractice.js:14 이러면 와우 

 

import React, { Component } from 'react';

 

class EventPractice extends Component {

    state = {

        messge: ''

    }

    render() {

        return (

            <div className="body">

                <input

                    type="text"

                    name="message"

                    placeholder="아무거나 입력해보세요"

                    value={this.state.message}

                    onChange={

                        (e) => {

                            this.setState({

                                message: e.target.value

                            })

                        }

                    }

                />

                <button onClick={

                    () => {

                        alert(this.state.message);

                        this.setState({

                            message: ''

                        });

                    }

                }>확인</button>

            </div>

        );

    }

}

 

export default EventPractice;

*

정리 

 

import React, { Component } from 'react';

 

class EventPractice extends Component {

    state = {

        messge: ''

    }

    constructor(props){

        super(props);

        this.handleChange = this.handleChange.bind(this);

        this.handleClick = this.handleClick.bind(this);

    }

    handleChange(e){

        this.setState({

            message: e.target.value

        })

    }

    handleClick(){

        alert(this.state.message);

        this.setState({

            message: ''

        })

    }

    render() {

        return (

            <div className="body">

                <input

                    type="text"

                    name="message"

                    placeholder="아무거나 입력해보세요"

                    value={this.state.message}

                    onChange={this.handleChange}

                />

                <button onClick={this.handleClick}>확인</button>

            </div>

        );

    }

}

 

export default EventPractice;

 

*

ref: DOM 이름

<div id=”my-element”></div>

 

*

state로 해결할 수 없는 상황

 

1. 특정 input에 포커스 주기

2. 스크롤 박스 조작하기 

3. Canvas 요소에 그림 그리기 등

 

*

컴포넌트에 ref 달기

<MyComponent ref = {(ref) => {this.myComponent=ref}} />

 

스크롤박스 컴포넌트 만들기 - 컴포넌트에 ref 달기 - ref 이용 컴포넌트 내부 메소드 호출