ES6 없이 사용하는 React

November 08, 2020

Q1. 현재 Class 문법을 활용하여 잘 사용하고 있는데... 만약 Class가 없다면?

create-react-class의 createReactClass를 활용
class 문법 또한 컴파일 되면 객체로 변환하기 때문 상관없다.
사용하는 방법만 다를뿐, 만들어지는 결과나, 안의 속성은 같다.

//es6
class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

//var
var createReactClass = require('create-react-class')
var Greeting = createReactClass({
    render: function () {
        return <h1>Hello, {this.props.name}</h1>
    },
})

Q2. defaultProps는 어떻게 사용?

es6에서도 class의 defaultProps의 속성에 접근해서 값을 할당한다.
createReactClass에서는 getMethod와 비슷한 getDefaultProps를 정의

class Greeting extends React.Component {
    // ...
}

Greeting.defaultProps = {
    name: 'Mary',
}

var Greeting = createReactClass({
    getDefaultProps: function () {
        return {
            name: 'Mary',
        }
    },

    // ...
})

Q3. State 정의는?

props와 비슷하게 getInitialState를 정의한다.

class Counter extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: props.initialCount }
    }
    // ...
}

var Counter = createReactClass({
    getInitialState: function () {
        return { count: this.props.initialCount }
    },
    // ...
})

Q4. 내부 method의 this 할당은?

class Properties를 활용한다면, 쉽게 this를 바인딩 하지 않아도 된다.
createReactClass의 내부 함수를 구현하므로 this는 createReactClass를 바라보기 때문에 this를 바인딩하지 않아도 된다.

class SayHello extends React.Component {
    constructor(props) {
        super(props)
        this.state = { message: 'Hello!' }
    }
    // 경고: 이 문법은 실험적입니다!
    // 화살표 함수를 통해 메서드를 바인딩합니다.
    handleClick = () => {
        alert(this.state.message)
    }

    render() {
        return <button onClick={this.handleClick}>Say hello</button>
    }
}

var SayHello = createReactClass({
    getInitialState: function () {
        return { message: 'Hello!' }
    },

    handleClick: function () {
        alert(this.state.message)
    },

    render: function () {
        return <button onClick={this.handleClick}>Say hello</button>
    },
})

Mixins의 기능이 있지만, 공식 문서에서 추천하지 않는다.

createReactClass에서는 구현이 가능