React를 사용하는 가장 큰 이유중 하나이다.
useState()함수를 사용하여, 하나의 인자와, 그 인자를 변형시켜 줄 함수를 선언받을 수 있다.
예를 들어 살펴보면
const data = React.useState()
console.log(data)위 코드를 클라이언트에서 생성시킨 후 console.log(data)를 찍어보면,
(2) [undefined, ƒ]
// 이에 undifined는 data이고, f는 data를 바꿀때 사용하는 function임위와 같은 [undifined, f]가 나온다
undifined는 우리가 선언시킬 인자이고, f는 그 선언된 인자를 변형시킬 함수의 자리이다.
위 값들을 data[0], data[1]이렇게 불러올 수도 있지만, 가시성도 떨어지고 비효율적이다.
그래서 초기에 인자의 변수를 잡아두고 시작한다.
const [counter, modifier] = React.useState(0);//여기서 0은 default값
이를 가벼운 예제를 통해 살펴보자면
const [counter, modifier] = React.useState(0);
function onClick() {
modifier(999)
}
console.log(counter)
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
)
//onclick이란 함수가 적용되면, modifier() 함수의 인자로 counter가 변화하게 됨
//console.log 값을 보면 counter = 0 이였다가, button을 누르면 counter가 999가 되는걸 확인 할 수 있음
조금 더 안전하게 값을 바꿔주기 위해선 modifier()함수 내 에 하나의 함수를 더 적용하면된다
//기존
modifier(999);
setCounter((current) => 999)
// 위와 아래는 동일한 동작을 하는데, 아래와 같은 방법을 선호하는 이유는, 혹시 모를 다른 함수로 인한 값의 변환을 막아 안전하기 때문이다.
// 또 현재의 값을 인자로 지닐 수 있기 때문에 변화에 덜 민감하다
useState()를 사용하는 가장 큰 이유는
- eventListener, selectquery, rerender를 하지 않고, 매 순간 원하는 부분을 렌더링 시킬 수 있는 함수가 짜여진다.
- render를 하는 함수를 따로 짜지 않아도 되는 이유는 useState에 있는 modifier함수가 state를 변경할 때 컴포넌트를 재생성하고 새로운 값으로 rerender하는 것이기 때문!
댓글