리액트 훅을 사용하는 분들은 비교적 당연하게 useState를 사용하고 있을 것이다.
component를 나눠서 function을 이용하여 만드는 경우를 많이 볼 수 있다.
하지만 이는 몇 년전, 리액트 버전 16.8 이전까지만 해도 function component 안에서는 state를 사용 할 수 없었다.
그러나 이제는 React hook을 이용해서 사용 할 수 있게 되었으니 그 hook이 바로 useState이다!
( Hook은 function 밖에서 사용하지 못하며, 안에서만 사용해야한다! )
[ 버튼을 만들어서 숫자를 하나씩 올릴 수 있도록 만들어보자! ]
1. 불러오기
useState는 React의 함수인데 이를 사용 할 곳에서 우선 상단에 import를 해와야한다.
이 때 Javascript distructoring을 활용하여 가져온다.
그 모양은 아래와 같다.
import React, { useState } from 'react
2. 사용하기
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<h1>Hook - useState</h1>
<h2>{count}</h2>
</div>
)
}
이와 같이 import를 한 후에 useState를 function 함수 안에서 사용할 수 있다.
console.log에 useState를 찍어보면 알겠지만, 이는 [undefiend, function] 으로 나올 것이다.
즉, count는 변수, setCount는 function을 나타낸다.
setCount는 변수를 컨트롤 하기 때문에 그 앞에 set이라고 통상적으로 붙여서 사용하게 된다.
그래서 전체적으로 나온 모양을 보면,
import React, { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0);
const countUp = () => {
setCount(count + 1);
}
const countDown = () => {
setCount(count - 1);
}
const resetHandle = () => {
setCount(0);
}
return (
<div>
<h1>Hook -useState</h1>
<h2>{count}</h2>
<button onClick={countUp}>+1</button>
<button onClick={resetHandle}>RESET</button>
<button onClick={countDown}>-1</button>
</div>
)
}
export default Counter
이처럼 사용 할 수 있는데, count 자체를 건드리지는 못한다.
이는 read-only로 사용이 되어지며 count를 변경하고 싶다면 setCount를 활용해서 count를 변경해야한다.
그런데 만약
const [count, setCount] = useState(0);
const [color, setColor] = useState(0);
const [number, setNumber] = useState(0);
이렇게 같은 useState(0)이 있다면 리액트는 어떻게 이를 구별할까?
리액트는 순서를 기억하게 된다.
즉, 첫 번째 useState는 count이고, 두 번째 useState는 color이고, 세 번째 useState는 number라는 순서를 기억하게 된다.
그러니 useState를 사용할 때는 top-level에 쓰인 순서대로 실행되도록 해야한다.
그렇다면 count는 현재값일까?
그것도 아니다.
예를 들어서
const Counter = () => {
const [count, setCount] = useState(0);
const countUp = () => {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
}
return (
<div>
<h1>{count}</h1>
<button onClick={countUp}>+<button>
</div>
)
}
이렇게 하면 값은 3씩 올라갈까?
그렇지 않다.
3개의 count가 모두 0이므로 1씩만 올라간다.
그렇다면 어떻게 해야 3씩 올릴 수 있을까?
이 때는 함수를 이용하면 된다.
const Counter = () => {
const [count, setCount] = useState(0);
const countUp = () => {
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
}
return (
<div>
<h1>{count}</h1>
<button onClick={countUp}>+<button>
</div>
)
}
이렇게 이전 값에 + 1을 해주게 되면 3씩 올라가게 만들 수 있을 것이다.
더불어 class에서는 Hooks를 사용 할 수 없다.