미소여우의 주석달기

React 이벤트 처리하기 & 리액트 컴포넌트 만들기(클릭 카운터)

2020년08월07일

에듀캐스트 장고&리액트 강의를 듣고 정리하는 글이다.

이벤트

컴포넌트에는 여러 이벤트가 발생 -> 이벤트에 대한 처리를 커스텀 웹브라우저의 HTML이벤트를 기본적으로 지원

  • 이벤트 핸들러 속성명은 camelCase로만 작성 (HTML에서는 onclick, 리액트는 onClick)
  • 이벤트 핸들러에는 필히 함수를 지정 (HTML에서는 문자열로 코드를 지정)

DOM 요소에만 이벤트가 지원한다.

  • 커스텀 리액트 컴포넌트에서는 HTML 이벤트를 지원하지 않는다.
  • 하지만 내부 Element에 DOM요소를 담아, 핸들러를 지정할 수 있다.
import React from 'react';
import PropTypes from 'prop-types';
import Counter from 'Counter';
import 'App.css';

class App extends React.Component {
  state = {
    myquery: '',
    language: '',
  };
  onChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };
  render() {
    return (
      <>
        <Counter onClick={() => console.log('clicked')} />
        <input name="myquery" onChange={this.onChange} />
        <input name="language" onChange={this.onChange} />
        <hr></hr>
        {JSON.stringify(this.state)}
      </>
    );
  }
}

export default App;

리액트 컴포넌트 만들기 (클릭 카운터)

App.js

import React from 'react';
import PropTypes from 'prop-types';
import Counter from 'Counter';
import 'App.css';

class App extends React.Component {
  render() {
    return (
      <div>
        <Counter />
        <Counter color="green" />
        <Counter color="blue" />
      </div>
    );
  }
}

export default App;

Counter.js

  • defaultPros: 디폴트 속성값 정해준다.
  • proTypes: 속성값은 자료형을 정해준다.
import React from 'react';
import PropTypes from 'prop-types';

class Counter extends React.Component {
  static defaultProps = {
    color: 'red',
  };

  static proTypes = {
    color: PropTypes.string,
  };

  state = {
    color: this.props.color,
    value: 0,
  };
  onClick = () => {
    // this.setState({ value: this.state.value } + 1);
    this.setState(({ value: prevValue }) => ({
      value: prevValue + 1,
    }));
  };
  // 우클릭 이벤트
  onContextMenu = (e) => {
    e.preventDefault();
    this.setState(({ value: prevValue }) => ({
      value: prevValue >= 1 ? prevValue - 1 : 0, // 삼항 연산자 참이면 좌측 실행, 거짓이면 우측 실행
    }));
  };
  render() {
    const { color, value } = this.state;
    return (
      <div
        onClick={this.onClick}
        onContextMenu={this.onContextMenu}
        style=
      >
        {value}
      </div>
    );
  }
}

const style = {
  width: '100px',
  height: '100px',
  display: 'inline-block',
  borderRadius: '50px',
  textAlign: 'center',
  lineHeight: '100px',
  userSelect: 'none',
  fontSize: '3rem',
  margin: '1rem',
};

export default Counter;
react

Related Posts