React : Component

React.Component와 Component의 차이
클래스 형 컴포넌트에서 클래스를 정의할 때 발생하는 두 가지 경우에 대해 알아보자.

1. React.Component를 쓰는 경우

import React from 'react';

class Foo extends React.Component {
    ...
}

2. Component를 쓰는 경우

import React, { Component } from 'react';

class Foo extends Component {
    ...
}

3. 두 방법의 차이가 있는가?
   우선 답부터 얘기하자면 두 방법에 차이는 없다. 그럼 왜 방법이 두 가지 일까?

export const Component = () => {}; // Component 함수를 내보냄

const React = { Component: Component };  

export default React; // React 객체를 내보냄

ES6 모듈 시스템에서는 모듈을 주고 받을때는 export, import 등의 키워드를 사용한다. 위의 예제도 마찬가지로 ES6 문법을 이용해 모듈을 내보내는 것이다. export + 함수/객체를 이용해 그 함수/객체를 명시적으로 내보낼 수 있게 해준다. 위의 예제는 Component라는 함수와 React 객체를 내보내고 있다.

이제 내보낸 함수/객체를 다른 파일에서 받아보자. 그럴려면 우선 import 키워드를 이용해야 한다.

import React from 'react';
import { Component } from 'react';

위 둘을 합치면 이런 모양 일 것이다.

import React, { Component } from 'react';

class MyComp extends React.Component {}
class MyOtherComp extends Component {}
1) Default Export

export default + 변수명 => import 변수명 from '파일 경로'

// import
import MyDefaultComponent from "./MyDefaultExport";

// export
const MyComponent = () => {}
export default MyComponent;
파일당 하나의 default export를 갖을 수 있다.

2) Named Export

export 변수명 => import {변수명} from '파일 경로'

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";

// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";

// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

export에서 쓰이는 변수명과 import에서 쓰이는 변수명은 꼭 똑같아야 한다. 그리고 import할 땐 꼭 { }로 export 하는 모듈의 이름을 감싸야 한다.

클래스 형 컴포넌트에서 constructor 생략하기
1. ES6 문법 (constructor)

class Example extends React.Component{
  constructor(props) {
    super(props);
    this.state = { name: 'walli' };
    this.mymethod = this.mymethod.bind(this)
  }

  mymethod() {
    // todo
  }
}

2. ES7 문법 (constructor 생략)

class Example extends React.Component{
  state = {
    name: 'walli'
  }

  mymethod = () => {
    // todo
  }
}

화살표 함수를 이용하면 bind를 할 필요가 없어진다.

클래스 형 컴포넌트에서 Event Bind 하는 법
1. ES6 문법 (constructor 안에서 bind하기)

constructor(props) {
  super(props);
  this.state = { name: 'walli' };
  this.mymethod = this.mymethod.bind(this)
}

mymethod() {
  // todo
}

2. 태그 안에서 bind하기

onClick={this.mymethod.bind(this)}

3. 화살표 함수 쓰기

mymethod = () => {
  // todo
}