React숙련주차03(React Hooks - useState)

🔴useState

🔴일반적인 방식과 함수형 업데이트의 비교

🔻무엇이 다른가

🔻왜 다른 방식을 취하는가

---

useState

useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다.

const [state, setState] = useState(initialState_초기값);

useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이며, 우리는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있다. state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다.

---

함수형 업데이트

setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식이 있습니다. 함수형 업데이트 방식 입니다.

import './App.css';
import { useState } from 'react';

function App() {

  const [number, setNumber] = useState(0);

  return (
    <>
      <div>Number State : {number}</div>
      
      <button onClick={function() {return setNumber(number + 1)}}>누르면 UP!</button >
      <button onClick={function() {setNumber(function(currentNumber){return currentNumber + 1;})}}>누르면 UP!</button > 
    </>

  );
}

export default App;

// 기존의 방식
<button 
  onClick={function() {
  return setNumber(number + 1)
  }}>누르면 UP!
</button >


// 함수형 업데이트 방식
<button onClick={function() {
  setNumber(function(currentNumber){
    return currentNumber + 1;
    })
  }}>누르면 UP!
</button >

> 함수를 하나 더 써준다고 생각하면 될 것 같다

---

기존의 방식으로 3번을 호출시,

// 기존의 방식
<button 
  onClick={function() {
  return setNumber(number + 1)
  }}>누르면 UP!
</button >


<button
  onClick={() => {
    setNumber(number + 1); // 첫번째 줄 
    setNumber(number + 1); // 두번쨰 줄
    setNumber(number + 1); // 세번째 줄
  }}
>
  버튼
</button>

> 기대하는 number은 3인데 1이 출력된다.

---

하지만 함수형 업데이트를 사용해서 위와 같이 3번을 호출하게 되면

<button
  onClick={() => {
    setNumber((currentNumber)=>{ return currentNumber + 1 });
    setNumber((currentNumber)=>{ return currentNumber + 1 });
    setNumber((currentNumber)=>{ return currentNumber + 1 });
  }}
>
  버튼
</button>

> 기대하는 결과 값인 3이 그대로 출력이 된다. 

 

💫왜 다른가

일반 업데이트 방식은 배치성으로 처리가 되어서 명령을 하나로 모아 최종적으로 한번만 실행 시킨다. 그래서 100번이든 1000번이든 1번의 실행 결과와 같다.

함수형 업데이트의 경우, 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.
> setNumber((currentNumber)=>{ return currentNumber + 1 })에서 setNumber 함수로 받아오는 인자_currentNumber은 현재 상태의 state이고 반환하는 조건으로 바뀐 state를 반영한다. 그렇기때문에 계속 업데이트되고 되서 실행횟수만큼 변한 값이 최종적으로 반영된다.

---

💫왜 배치성으로 처리가 되는 것인가

렌더링이 잦다 = 성능적인 이슈가 발생하는 것
> 불필요한 렌더링을 피하기 위해서 한꺼번에 모아서  한 번만 처리하는게 렌더링을 줄일 수 있는 것이다. 그래서 React에서는 이 불필요한 렌더링을 피하기위해서 배치성으로 처리(한꺼번에 모아서 한 번만 처리)함으로써 렌더링을 줄이고자 하는 것이다.