잘못 된 내용에 대한 지적은 언제든 환영입니다.
useState
라는 Hook을 통해 상태 관리를 할 수 있다.Q. Hook이 대체 뭔가요🤔
A. 함수형 컴포넌트에서 사용되는 함수로, 이를 통해 생명 주기, 상태 관리 등의 React의 다양한 기능들을 사용할 수 있다.
useState
사용하기useState
함수를 import해준다. import { useState } from "react";
const [state, setState] = useState(initialState);
state
: 현재 상태setState
: 새로운 state 값을 지정하는 settet 함수initialState
: 초기 state 값num
)을 조절할 수 있는 웹앱import { useState } from "react";
function Counter() {
/* const numState = useState(0);
const num = numState[0]; // 상태
const setNum = numState[1]; // setter 함수
위의 과정들을 '배열 비구조화 할당'문법을 통해 아래 한줄로 축약함 (챕터 3 참고) */
const [num, setNum] = useState(0);
const onIncrease = () => {
setNum(num + 1);
};
const onDecrease = () => {
setNum(num - 1);
};
return (
<div>
<h1>{num}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
export default Counter;
useCallback
함수 내부에 useState
를 사용 할 경우 성능 최적화에 용이하다.useCallback
에 대한 내용은 이후 챕터에서 알아 볼 예정이다.) const onIncrease = useCallback(() => {
setNum((preNum) => preNum + 1);
}, []);
const onDecrease = useCallback(() => {
setNum((preNum) => preNum - 1);
}, []);
References
"7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기" .velopert
"React에서 불변성을 지켜야 하는 이유" .webigotr