[6주차] 리액트숙련: React Hooks - useState

React Hooks - useState

 

1. 가장 기본적인 hook

2. 함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다

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

useState(); 의 반환값은 배열. 이제 그 배열을 구조분해할당 형태로 받은 형태가 위의 식이다.

 

 

함수형 업데이트

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

function App() {

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

  function plusHandler(event) {
    // useState 를 이용하여 업데이트하는 기존 방법
    // return setNumber(number + 1);


    // useState를 이용하여 업데이트하는 함수형 업데이트 방법
    // 현재 State 를 인자로 받아, 업데이트 후의 결과값을 반환
    setNumber((currentNumber)=>{
      return currentNumber + 1;
    })
  }
  return (
    <div>
      <div>
        number state : {number}
      </div>
      <button onClick={plusHandler}>
        누르면 Up
      </button>
    </div>

  );
}

export default App;

 

 

두 방식의 차이점

 

일반 업데이트 방식은 아래처럼 세번 명령을 내리면, 결과가 1이 나온다. 버튼 한번을 누르면, 1이 나옴.

그 이유로는 명령들을 하나로 모아 최종적으로 한번만 실행 시키는 배치(batch)로 처리하기 때문이다.

// src/App.js

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;

 

 

 

 

함수형 업데이트 방식은 아래처럼 세번 명령을 내리면, 결과가 3이 나온다. 버튼 한번을 누르면, 3이 나옴.

그 이유는 명령들을 모아 순차적으로 각각 1번씩 실행시키기 때문이다.

0 + 1 = 1 (current n)

-> 1 + 1 = 2 (current n)

-> 2 + 2 = 3 

// 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;

 

 

왜 리액트팀은 useState가 batch 방식으로 동작하도록 만들었을까?

기본적으로 렌더링이 많은 것은 -> 성능에 이슈가 있는 것

결국 불필요한 렌더링을 피하기 위해서 batch update 방식으로 한꺼번에 state를 업데이트한다.

 

 

결론

useState에는 2가지 업데이트 방식이 있다 => 1. 일반 업데이트 방식 2. 함수형 업데이트 방식

useState로 원시데이터가(숫자, string..) 아닌 데이터를 변경할 때는 불변성을 유지해야 한다