useState는 상태값을 관리하게 해주는 hook이다.
기본값(initialState
)을 파라미터로 받고, 상태값인 state
와 상태값을 변경할 수 있는
setState
함수를 반환한다.
const [state, setState] = useState(initialState)
위에 코드에 있는 state 라는 이름은 임의로 지정한 것일 뿐,
사용에 맞게 바꿀 수 있다. (예. const = [number, setNumber] 등)
function Click() {
const [isClicked, setIsClicked] = useState(false) // false는 기본값
const toggleClick = ()=>{
console.log(isClicked)
setIsClicked(!isClicked)
}
return (
<div>
<button onClick={toggleClick}>클릭</button>
</div>
// 클릭할 때마다 콘솔에 true와 false가 toggle되며 뜨는 것을 확인할 수 있다.
// 즉, isClicked(state)의 값이 바뀐다.
)
}
setIsClicked(setState)로 isClicked(state)의 상태를 변경하면 렌더링이 다시 일어난다.
컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
즉, setState로 인해 state의 값이 변하여 새로 렌더링 될 때 실행한다는 뜻이다.
import React, { useState, useEffect } from 'react';
function Menu() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("click!!", count)
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Menu()