react를 공부해보셨다면, state는 진짜 한평생 쓴다고 봐도 무방하다는 말에 동의하실 것이다.
그러면 이제 react의 핵심, State가 무엇인가에 대해 한번 끄적여 보겠다.
What
그렇다면 State란 뭘까? State를 네이버 사전에서 찾아보았다.
그렇다. State는 상태였다. 누가 모를까.
중요한건, react에서의 state도 그 의미가 크게 다르지 않다는 점인데,
이 "상태"가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 한다는 것을 알면 좋을 것이다.
When
값이 동적으로 변화하고 그 변화에 맞게 새롭게 렌더링이 되어야 할 때 사용된다.
즉, 위에서 이야기했듯, 동적으로 데이터를 관리하고 화면을 그려내야할 때 사용된다는 것이다.
How to use useState()
일단,
"상태"를 만들어야 하고, (State)
상황에 맞게 "상태"를 바꿔줄 수 있어야 하겠죠? (Setter)
결론은 간단하다. useState라는 함수를 활용하면 된다.
이 함수를 통해, State를 선언하고, State값을 Set 해주는 Setter를 만들 수 있다.
import { useState } from 'react';
const [num, setNum] = useState(1);아주 간단하죠?
위 코드에 사용된 문법은 Destructuring 문법이라는 것인데, 궁금하다면 한번 찾아보고 오는 것을 추천한다.
말로 풀자면, num이라는 State와, setNum이라는 Setter 함수를 선언하고,
1이라는 초깃값을 num에 할당한 것인데~
이렇게 사용하는 이유는,
useState 함수가 초깃값을 인자로 받고, 그에 따른 return 값으로 2개의 요소를 포함한 배열을 뱉기 때문이다.
이때 뱉는 첫 번째 요소가 State, 두 번째 요소가 이 state를 바꾸는 Setter 함수인 것이다.
그렇다면 각각 요소들의 네이밍은 어떻게 할까? 간단하다.
변하는 값의 특성에 맞게 State의 이름(여기선 num)을 붙이고,
Setter 함수는 state 이름 앞에 set을 붙인 다음 카멜 케이스로 사용하는 것(여기선 setNum)이다.
State는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이 아니라, 이 Setter 함수를 활용해야 한다. 꼭! Setter 함수를 통해 argument 값을 전달하여 state 값을 변경해 주자.
How to use Setter()
그럼 이렇게 강조하는 Setter는 어떻게 사용하는 것일까?
그래서 코드를 준비했다!
import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';
function App() {
const [num, setNum] = useState(1);
const diceRollHandler = () => {
setNum(3);
};
const diceClearHandler = () => {
setNum(1);
};
return (
<div>
<Button onClick={diceRollHandler}>던지기</Button>
<Button onClick={diceClearHandler}>초기화</Button>
<Dice num={num} />
</div>
);
}
export default App;이벤트 핸들러에 Setter 함수를 세팅해 둔 후, Button의 onClick이라는 이벤트가 발생할 때마다 State의 값이 변하면서 화면이 새로 그려지는 것이다!
...
이제 대략적인 State에 대한 설명이 끝났다. 잘 이해가 되는 글인가? 라고 스스로에게 물었을 때,
그렇지만은 않다. 라고 대답할 수 있을 것 같다.
다음번엔 state를 참조형으로 사용할 때 유의해야할 점에 대하여 다뤄보겠다.
총총.
