4. useState

1. useState

useState 는 리액트에서 제공하는 Hook(훅) 중 하나이다.
hook 이란 리액트 16.8 버전부터 제공되는 함수형 컴포넌트에서도
React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
원래 컴포넌트의 저장소 개념인 state 는 클래스형 컴포넌트에서만 사용 가능했지만,
useState는 함수형 컴포넌트에서도 state를 사용가능하게 해준다.

1.1 사용법

const [count, setCount] = useState(100);

이렇게 useState 사용을 선언한다.

import {useState} from "react";

export default function HookState({name}) {
    console.log(name);

    // state 값을 기본 100으로 설정하여 생성
    // [state, setState 함수]
    const [count, setCount] = useState(100);

    const downCount = () => {
        setCount(count - 1);
    }

    return (
        <div style={{margin: 10}}>
            <h3>COUNT : {count}</h3>
            <button onClick={downCount}>down count</button>
        </div>
    );
}

useState 는 이렇게 사용할 수 있다.
count는 초기값이고, setCount가 변하는 값이다.
button 태그의 onClick 이벤트를 걸어서 버튼을 클릭하면 100으로 설정되어 있던 초기값에서
-1씩 감소하는 기능을 구현한 코드이다.

---

1.2 클래스형 컴포넌트에서 구현하기

import {Component} from "react";

/*
* state 는 props 와 다르게 수정이 가능한 값이다.
* state 는 setState() 함수를 통해 업데이트해야 한다.
*
* */
class BtnState extends Component {
  	state = {count: 0};

    // this.state 를 인식 하기 위해서는 화살표 함수를 사용해야 한다.
    upCount = () => {
        this.setState({count: this.state.count + 1}); // state 가 업데이트 되야만 UI가 다시 렌더링된다.
    }

    render() {
        return (
            <div style={{margin: 10}}>
                <h3>{this.state.count.toString()}</h3>
                <button onClick={this.upCount}>click</button>
            </div>
        );
    }
}

export default BtnState;

클래스형 컴포넌트에서는 버튼을 클릭했을 시, 카운트가 1씩 증가하는 것을 구현했다.
클래스형에서는 useState 훅을 쓰지않고, 그냥 state를 쓸 수 있다.
다만 주의할 점은 클래스이기 때문에, 현재 클래스의 state 를 지칭해야 하므로 앞에 this 키워드가 들어간다는 것이다. 함수 선언의 경우는 클래스 내부 이므로 const 나 function 과 같은 것은 들어가지 않고, 그냥 함수 이름을 바로 선언하면 된다. 함수를 사용할 때에도 this 키워드가 들어간다.