3) React - 간단한 Counter UI를 만들어보자.

React의 작동 방식 및 개발 방식에 대한 이해를 하기 위해 간단한 예제를 하나 만들어 보자.

 

먼저 src/component 폴더를 만든다. 예제는 UI에 버튼을 클릭하면 숫자값이 증가하는 간단한 예제 Component를

만든다.

 

import { useState } from 'react';

function Counter(){
    const [countNum  , setCountNum] = useState(0);
    function addCount(){
        setCountNum(countNum + 1)
    }

    return(
        <div>
            <span>Counter : {countNum} </span>
            <button type="button" onClick={addCount}>Add Count</button>
        </div>
    )
}

export default Counter;

 

위에서 만든 Component는 함수형 Component이다. Class형 Component도 있는데 위의 코드를 Class형으로 변형하면 

아래 소스코드와 같이 된다.

 

import React from 'react';

class Counter1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            countNum: 0
        }
    }
        
    addCount = () =>{
        this.setState({countNum : this.state.countNum +1});
    }

    render(){
        return(
            <div>
                <span>Counter : {this.state.countNum} </span>
                <button type="button" onClick={this.addCount}>Add Count</button>
            </div>
        )
    }
    
}

export default Counter1;

두 가지 소스 코드는 많이 다른 모습처럼 보여지지만 실제로 똑같은 동작을 하는 코드이다.

첫번째 코드에서는 Component의 state 즉 상태를 관리 하기위해 React Hook이라는 기능을 사용한것이고 

두번째 코드는 class형 내부 state 관리기능을 이용한것이다.

 

첫번째 함수형에서는 기존에는 state 관리를 기능이 없어서 Component의 상태가 변해도 re-render를 할 수 없었는데 

React 1.6 버전부터 hook 이라는 기능이 추가 되면서 함수형 Component에서도 상태를 관리 할 수 있게 되었다.

 

실제 React Hook이 발표되면서 React 측에서는 Class 형보다 함수형이 더 성능면에서는 나은면이 있다고 했기 떄문에 

이후 Project를 진행하면서 함수형 Component로 만들도록 하겠다.

 

다음내용으로는 React에 화면 전환을 위해 Route기능을 추가해서 실제 메뉴간의 이동과 화면내에서 링크의 작동 방식에 대해 공부해 보도록 하겠다.