class형 component

| 클래스형 컴포넌트

클래스형 컴포넌트는 함수형 컴포넌트보다 사용이 덜 합니다.
하지만 프로젝트의 유지보수를 위해 알아봅시다 !

함수형Hello.js

import React form 'react;


function Hello ( { color, name, isCheck } ){
    return (
        <div style = {{ color }}>
            <isCheck && <b>*<b>}
                Hello {name}
         </div>
        );
}

Hello.defaultProps = {
    name : "홍길동"
 };

 export default Hello;

클래스형 컴포넌트 Hello.js

import React from 'react';


class Hello extends Component {
    render(){
        const { color, name, check} = this.props;
        return (
            <div style={{ color }}>
                {check && <b>*</b>}
                하이 {name}
            </div>
          );

    }
}

Hello.defaultProps = {
    name: "홍길동";
    };

export default Hello;

class형 컴포넌트에서는 render() 메서드가 꼭 ! 필요로 합니다.
해당 메서드안에서는 JSX 문법으로 작성하여 반환하도록 구현해야합니다.
props 를 조회해야 하는 상황이면 this.props 를 조회하여야합니다.

deafultProps 를 설정하는 것은 이전 함수형 컴포넌트에서 했을 때와 똑같이 해주셔도 되고,
static 키워드와 함께 선언 할 수 있습니다.

Hello.js

import React, { Component } from 'react';

class Hello extneds Component {

    //static 을 사용하여 기본 값 설정
    static defaultProps = {
        name : "홍길동"
    }

    return()(
        <div style={{ color }} >
                {isSpecial && <b>*</b>}
                Hello {name}
        </div>
    );
  }
}

export deafult Hello;

| 커스텀 메서드 활용

기존 함수형 컴포넌트에서는 특정 작업(버튼을 누를 경우)을 실행해야 하는 상황이라면
컴포넌트 안에 선언해주면 됐습니다.

const onStart = () =>{

    dispathc({ type : "start' }).

};

하지만 클래스형 컴포넌트에서는 render 함수 내부터에서 선언은 할 수 있기는 하지만, 일반적으로 그렇게 하지 않고 클래스 안에 커스텀 메서드를 선언합니다.

class Example extends Component {
    Count(){
        console.log("내부선언 메서드");
    }
}

render(){

    return (
        <div>
            <button onClick={this.Count} >카운트 실행</button>
        </div>
    }
}

export default Counter;

또한 여러개의 기능을 하는 동작이 있을 경우에는 this 를 조회하려고 하면 컴포넌트 이느탠스를 가르키지 않게 됩니다.

이를 해결할 수 있는 방법은 총 3가지가 있습니다.

1.클래스의 생성자 메서드 constructor 에 bind 를 설정해준다

class Example extends Component {

    constructor(props){
        super(props);

        //bind 설정
        this.Count = this.Count.bind(this);
        this.Count2 = this.Count2.bind(this);
    }

    Count(){
        ...
    }

    Count2(){
        ...
    }
    ...
}

함수의 bind 를 사용하면, 해당 함수에서 가르킬 this 를 직접 설정해줄 수 있습니다.

constructor 에서는 props 를 param으로 받아오고 super(props)를 호출하여야 합니다.
이렇게 하는 이유는 Component 쪽에 구현되어있는 생성자 함수 를 먼저 실행해주고, 우리가 할 작업을 하게다 라는 것을 의미합니다.

2.custom 메서드를 선언 할 때 화살표(arrow)함수 문법을 사용해서 작성한다. ( CRA 프로젝트라면 주로 이 방법을 이용 )

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

    Counter2  = () =>{
        console.log('counter2')
    };

    ...
}

클래스형 컴포넌트에서 화살표 함수를 사용해서 메서드를 구현하는 것은 클래스에 특정 속성을 선언할 수 있게 해주는 class-properties 라는 문법을 사용합니다.
CRA로 만든 프로젝트에는 적용이 되어있는 문법이고, 정식 js의 문법은 아닙니다.

3.onClick 에서 새로운 함수를 만들어 전달하기

해당 방법은 렌더링 할 때마다 함수가 새로 만드렁지기 때문에 나중에 컴포넌트 최적화 할 때 까다롭습니다.

| 상태 선언하기

클래스형 컴포넌트에서 상태를 관리 할 때에는 state 라는 것을 사용합니다.
state 를 선언 할 때는 constructor 내부에서 this.state 를 설정해주시면 됩니다.
단, 주의할 점은 클래스형 컴포넌트의 state 는 무조건 객체형태여야만 합니다.

class Example Extends Component {
    constructor(props){
        super(props){

            //stte를 이용한 생태관리
            this.state = {
                counter : 0
            }
        }
    }

    ...


    //state 사용 시  - this.state 로 사용
    render(){
        return (
            <div>
                {this.state}
            </div>
        }
    }    
}

CRA 프로젝트라면 class-properties 문법이 적용되어 굳이 constructor 를 작성하지 않고도 다음과 같이 state를 설정할 수 있습니다.

class Exapmple extends Component {
    state = {
        counter : 0
    };

    Count = () =>{
        console.log("count");
    };

    Count2 = () =>{
        console.log("count2");
    }

    render(){
        return (
            <div>
                <button onClick = {this.Count}>test</button>
                <button onClick = {this.Count2}>test</button>
            </div>
        }
    }
}

export defaut Exmaple;

| 상태 업데이트

상태를 업데이트 할 경우 this.setState 함수를 사용하면 됩니다.
또한 값을 수정 후 두 번째 파라미터로 추후 동작을 추가로 요청할 수 있습니다.

class Example extends Component{

    state = {
        count : 0
    };

    Count = () =>{
        conosle.log("Cout")
        this.setState(state => ({

            count : state.count +1      
        })

        //두 번째 callback함수 호출
        ,()=>{
            console.log(this.state.count)    //     1을 더한 후인 상태
        });
    };

    render(){
        return (
            <div>
                <button onclick={this.Count}>클릭</button>
            </div>
        )
    }

}

여기서 주의할 점은 위의 코드처럼 함수형으로 작성하지 않을 시 setState 를 두번 사용하면서 state.count의 값을 1 더해주는 작업을 할 시
오류가 발생합니다.
따라서 함수형으로 수정하는것을 추천드립니다.