React - 숙련 : useState - 함수형 Update

useState

• useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게해준다.
• reRendering을 일으키는 trigger 역할을 하며, 값이 변경 됬을 때 reRendering 을 해준다.

const [state,setState] = useState([])

// 이렇게 객체 형태 | 배열 형태는 불변성을 유지시켜줘야 reRendering을 일으켜줌
setSate([...state, 1])

함수형 업데이트

Q . 함수형 업데이트란?

A . seState를 일반적으로 사용하는 방식이 아닌 함수형, 즉 함수처럼 인자값을 가지고 하는 방식

// 기존방식
setState(number+1)

// 함수형 업데이트 방식
setState(() => {});

()안에 수정 할 값이 아닌 함수를 집어 넣고, 파라미터 자리에 어떠한 변수를 스윽 정의 해주면 그 함수의 인자에는 현재의 state를 가지게 되고, {...} 안에서 이 값을 변경하는 코드를 작성 할 수 있게 된다.

🙄 와닿지가 않는다??

음... 누군가 나의 블로그를 보는 사람들에게...

Event 객체

일반 Javascript를 생각해보자

우리가 자바스크립트로 html을 조작 할 때 addEventListenr 를 등록 하는데,

거기에는 event 객체라는 것이 숨겨져있다.

우리가 그것을 사용하려면 함수의 파라미터 자리에 보통 e, 또는 event 라고 명시하고 이벤트 객체를 가지고 사용하는데, 그와 비슷한 방식이라고 나는 이해 하였다.

// javascript
 // e를 명시 해줘야 event 객체를 사용 할 수 있으니까...
input.addEventListenr('change',(e)=>e.target.value)

// React
setState(e=>e+1) // 위와 pair가 맞지 않나?? 난 그렇게 생각이 들음

setState 에 함수형 업데이트 방식으로 state 변경을 할 때. 일반 자바스크립트의 event객체를 사용하는 것이 이와 같은 맥락 아닐까 싶다.

---

함수형 업데이트를 사용 하는 방식은 별거 없다.

const [state,setState] = useState(0)
setSate (pre=>pre+1 ) // pre를 console로 찍어보면 0 이 들어있다.

setState(pre=>{
  console.log(pre)// 0
  pre+1 
})

console.log(state) // 1이 되는 마법

두 방식의 차이점은?

일반 방식에서는

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

setNumber(number+1) 을 했기에 순차적으로 1씩 증가하여 3이라는 결과 값을 기대했겠지만 그냥 1씩 증가한다.

(이유는 react에서는 auto-batch라는 설정이 있기 때문이다)

함수형 업데이트

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

내가 원하는 순차적으로 3씩 증가한다.

왜 다른가.

일반 업데이트 방식은
버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리함
즉 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킨다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행됨.

반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면,
그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.
0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과값이 나오는 것.