React 클래스형 컴포넌트 & 이벤트핸들링과 this

 

 

 

리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다.

 

Functional component

첫 번째로 함수형 컴포넌트가 있다.

 

- 함수형 컴포넌트는 return을 통해 렌더링하고 싶은 JSX를  반환해준다.

- 인자에 props를 넣어서 받아온다.

- defaultProps 는 함수 바깥에 선언해준다.

 

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return (
    <div style={{ color }}>
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
};

export default Hello;

 

Class component

두 번째로 클래스형 컴포넌트가 있다.

 

- render() 메소드를 사용해야한다. 이를 통해 렌더링하고 싶은 JSX를 반환한다.

- props를 조회할 때는 this.props 를 사용한다.

- defaultProps 는 함수형 컴포넌트와 똑같이 해도 되고, 아니면 클래스 내부에 static 키워드를 통해 선언할 수 있다.

 

import React, { Component } from 'react';

class Hello extends Component {
  static defaultProps = {
    name: '이름없음'
  };
  render() {
    const { color, name } = this.props;
    return (
      <div style={{ color }}>
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

import React, { Component } from 'react';

 

: 컴포넌트를 리액트로부터 임포트한다.

 

class 이름 extends Component { 

  render() {

    return(

    );

  }

}

 

: 클래스형 컴포넌트의 기본 형식이다.

 

const { color, name } = this.props;

 

: props로 넘겨받은 color와 name을 디스트럭쳐링 해준다.

 

 

이벤트 핸들링

 

- camelCase 표기법으로 작성한다.

- 클래스 내부에 이벤트 함수를 선언한다.

  ( 클래스 내부에 종속된 함수를 메서드라고 부른다. 이와 같은 이벤트 함수들을 커스텀 메서드라고 한다.)

- 이벤트 이름은 보통 handle로 시작한다.

  (필수는 아니지만 주로 사용하는 표기법이다.)

- JSX 를 사용하여 문자열이 아닌 함수 객체로 이벤트를 전달한다.

- 기본 동작을 방지하기위해서는 반드시 preventDefault를 호출해야한다.

 

 

 

이벤트 핸들링 함수와 this

 

메서드들을 각 DOM 에 이벤트로 등록하는 과정에서 메서드와 컴포넌트 인스턴스의 관계가 끊겨지기 때문에

this가 컴포넌트 인스턴스를 가리키는 작업을 해줘야한다.

 

1. 클래스의 생성자 메서드 constructor에서 this를 bind 해주기

바인딩 해주지 않는다면 함수가 호출될 때 this 는 undefined  상태일 것이다.

 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
  }

  handleIncrease() {
    console.log(this);
  }

  render() {
    return (
      <div>
        <h1>0</h1>
        <button onClick={this.handleIncrease}>+1</button>
      </div>
    );
  }
}

export default Counter;

 

constructor(props) {

  super(props);

  this.handleIncrease = this.handleIncrease.bind(this);

}

 

: 생성자 함수에서 super(props)를 먼저 불러온다.

 해당 클래스가 컴포넌트로서 작동할 수 있도록 하고 그 후 추가 작업을 진행하겠다는 것이다.

 bind를 사용하여 해당 이벤트 함수에서 가리킬 this를 직접 설정해준다.

 bind 뒤 소괄호에 작성한 것이 this가 될 것이다.

 

 handleIncrease() {
    console.log(this);
  }

 

: 콘솔로 this를 찍어보면 counter 컴포넌트가 잘 나타날 것이다.

 

 

2. 화살표 함수 사용하기

import React, { Component } from 'react';

class Counter extends Component {
  handleIncrease = () => {
    console.log(this);
  };

  render() {
    return (
      <div>
        <h1>0</h1>
        <button onClick={this.handleIncrease}>+1</button>
      </div>
    );
  }
}

export default Counter;

 

  handleIncrease = () => {
    console.log(this);
  };

 

: 이 방법은 create-react-app을 사용하여 프로젝트를 진행할 때 사용할 수 있다.

  왜냐하면 클래스형 컴포넌트에서 화살표 함수를 사용해 메서드를 구현하는것은

  class-properties라는 문법을 사용해야하기 때문이다. 이는 정식 자바스크립트 문법이 아니다.

  어쨌든 직접 구현한 함수에서 this를 사용하기 위해서는 화살표 함수로 함수를 만들어줘야한다.