[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

React 공부를 시작했다..

props와 state에 적응하기 위해

첫번째 프로젝트로 간단한 계산기를 만들고 있다..

근데 대부분 클래스형으로 만들었는데, 요즘엔 함수형을 더 많이 사용한다고 한다. (함수형이 좀 더 빠르고 메모리도 덜 잡아먹는다)

그래서 다시 클래스형을 함수형으로 바꾸고 있다... ㅋㅋ

클래스형 적응 완료 했는데, React Hooks의 useState 요 놈 잘 지켜보겠다. 

 

기록 남길 겸.. 간단한 예제를 남겨보겠다. 개념은 구글링하면 잘 정리된 사이트가 많으니 생략! 

 

import React, { Component } from 'react';

//클래스형 컴포넌트
class CalResultView extends Component {

    state = {
        claResult : ''
    }

    calResultView = (e) => {
        this.setState({
            claResult : eval(e.target.value)
        });
    }

    render() {
        const { inputData } = this.props;


        return (
            <div>
                <button onClick={this.calResultView}  value={inputData}>=</button>
                {this.state.claResult}
            </div>
        );
    }
}

export default CalResultView;

 

import React, { useState } from 'react';

//함수형 컴포넌트
const CalResultView = ({inputData}) => {            //{inputData}  => 부모로 부터 받아온 props
    const [ inputs, setInputs ] = useState({        //state 지정 //const [ 상태 값 저장 변수 , 상태 값 갱신 함수 ] = useState(상태 초기 값)
        calResult : '',
    });

    const { calResult } = inputs;   //비구조화 할당
    
    const calculatingResult = (e) => {
        setInputs({             //setState를 구현
            ...inputs,          //기존의 input 객체 복사 (함수형 컴포넌트는 자동으로 객체 안 만들어주기 때문에)
            calResult : eval(e.target.value)       //값 수정
        });
    }

    return (
        <div>
            <button onClick={calculatingResult}  value={inputData}>=</button>  {/** 함수 호출 시 this를 쓰지 않음 */}
            {calResult}      
        </div>
    );
};

export default CalResultView;