State Hook

State Hook

우리는 컴포넌트 내부에 변수를 저장하려할 때 클래스형 컴포넌트를 만들어서 state를 사용했다

하지만 hook이 나오고 나서는 따로 클래스형 컴포넌트를 작성할 필요가 없이 hook 기능을 사용하면 된다

사용법

import React, {useState} from 'react';

함수형 컴포넌트에서 state를 사용하기위해선 우선 useState를 임포트해야한다

function Counter(){
    const [count,setCount] = useState(0); ---- 1

    const handleClick = ()=>setCount(count+1); ---- 3

    return (
        <Fragment>
            <h1>Count</h1>
            <h2>{count}</h2>
            <button onClick={handleClick}>+</button> ---- 2
        </Fragment>
    )
}

위 컴포넌트는 버튼을 누르면 숫자가 올라가는 매우 간단한 컴포넌트이다

자세히 보면 props를 받아오지도, class형이라 state를 사용할 수 없는대도 불구하고 내부에서 변수를 선언하고 변경하고 있다

useState는 state 변수와 state를 변경할 수 있는 함수를 반환한다

1번 코드를 보면 구조 분해 문법을 사용해서 count 변수와, count를 변경할 수 있는 함수인 setCount를 초기화했고

카운트는 0에서 부터 시작하기 때문에 제일 처음 렌더링할 때 초기화 수치는 0으로 해뒀다

이후 setCount를 불러서 count의 수치가 바뀔 때 마다 리액트가 감지해서 렌더링하게 된다

2번에 onClick이벤트를 보면 클래스가 아니기때문에 this를 사용하지않고 바로 이벤트 함수를 할당하고 있고

함수를 따라서 3번을 보게되면 함수에서 직접적으로 건드리는 것이 아닌 setCount를 불러서 count의 값을 수정해주고 있다

---

필요하다면 여러개의 useState를 사용해서 변수를 늘려줄 수 있다

const [count,setCount] = useState(0);
const [test,setTest] = useState('test');
const [value,setValue] = useState({ a:1, b:2});

변수에는 모든 값이 다 들어갈 수 있다