<리액트 기초> 코드 개선하기

*  class의 constructor

 - hooks를 사용할 때를 제외하고 class방식에서 컴포넌트에 기본적으로 다음과 같이 작성하였다.

 

const React = require('react');
const { Component } = React;


class Practice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            first: '',
            second: '',
        };
    }

    render() {
        return (
            <>
            <div>첫 번째 값 : {this.state.first}</div>
            <div>두 번째 값 : {this.state.second}</div>
            </>
        );
    
    }
}

 

 - 위에서 실제로는 constructor를 작성하지 않고 컴포넌트를 만들어도 상관없다. 이를 개선하면 다음과 같다.

 

const React = require('react');
const { Component } = React;


class Practice extends Component {    
    state = {
        first: '',
        second: '',
    };
    

    render() {
        return (
            <>
            <div>첫 번째 값 : {this.state.first}</div>
            <div>두 번째 값 : {this.state.second}</div>
            </>
        );
    
    }
}

 - constructor를 작성하지 않으면 위와 같이 바로 state를 명시하면 된다.

 

 - class형 컴포넌트에서 자기만의 함수를 만들 때에는 반드시 화살표 함수를 써야함을 앞 장에서 언급했었다.  그 이유는 화살표 함수를 쓰지않으면 this를 인식하지 못하기 때문이다. 만약 화살표함수를 쓰지않으려면 아래처럼 this를 인식하도록 작성해야한다. 

 

const React = require('react');
const { Component } = React;


class Practice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            first: '',
            second: '',
        };
        this.onSubmitForm = this.onSubmitForm.bind(this);
        this.onChangeInput = this.onChangeInput.bind(this);
    };

    onSubmitForm(e) {
        ...
    }

    onChangeInput(e) {
        ...
    }

    render() {
        return (
            <>
            <div>첫 번째 값 : {this.state.first}</div>
            <div>두 번째 값 : {this.state.second}</div>
            </>
        );
    
    }
}

 

 - 위는 onSubmitForm과 onChangeInput이라는 임의의 함수에서 this를 인식하도록 한 것이다. 화살표함수를 사용하지 않으면 위와 같이 코드의 가독성이 떨어질 수 있다.

 

* class에서의 this.state

 - class 컴포넌트에서도 hooks에서처럼 this.state를 일일히 언급하지 않는 방법이 있다. 바로 구조 분해 문법을 사용하는 것이다.

 

 - 예를 들어 위에서 봤던 코드 블럭중 render부분에서 this.state가 반복 되는 것을 피하고 싶다면 다음과 같이 작성한다.

 

render() {
    const { first, second } = this.state;
    return (
        <>
        <div>첫 번째 값 : {first}</div>
        <div>두 번째 값 : {second}</div>
        </>
    );

}

 - 위와 같은 방식을 비구조화 할당이라 한다.

 

 

---

 

 

참고

 

 

이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)