[React]useState

useState ⭐️

• React의 state는 컴포넌트 내부의 변경 가능 한 값이다.
• 함수형 컴포넌트에서 useState 훅을 사용해 상태를 변경한다.

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>{number}</h1>
    </div>
  );
}

export default App;

• React 패키지에서 useState를 불러와 import 후 사용할 수 있다.
• useState의 인자에는 초기값을 할당한다. (불리언이나 배열, 객체도 할당 가능)
• useState는 배열을 반환하는데 이때 첫번째 number는 원소의 현재 상태, 두번째 원소는 Setter함수를 반환한다.

 

setState 🛠

import React, { useState } from "react";

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

  const onIncrease = () => {
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

• setNumber를 사용해 값을 변경하게 되면 해당 컴포넌트는 화면에 다시 렌더링 되어서 화면이 업데이트 된다.
• 위 코드를 보면 setNumber의 인자로 직접 값을 변경하고 있는데 이런 방법은 문제가 생길수도 있다.
• 그 문제를 방지하는 법으로 콜백함수를 이용하는 함수형 업데이트, useEffect를 이용하는 방법이 있다.

 

setState의 동작 방식

import React, { useState } from "react";

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

  const onIncrease = () => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(number - 1);
    setNumber(number - 1);
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

• 이렇게 setter함수를 한번에 여러번 했을경우 3이 +- 될 것 같지만 1만큼만 변경된다. 이건 setState가 비동기적으로 작동하기 때문이다.
• 클릭이벤트 발생 -> setNumber 실행 -> 비동기로직으로 순위 뒤로 밀려남 -> 다른 동기적 로직들 실행 -> 다음 모든 setNumber 한번에 실행 -> 동시에 실행하기에 이전 number 값인 0을 각각 할당 즉, 0 + 1 을 3번 하는꼴
• 이렇게 동작하는 이유는 리액트의 state가 변경이 되면 리렌더링이 일어나는데 각각의 state를 하나하나 렌더링을 해준다면 성능적으로나 효율적으로나 문제가 되기 때문에 react의 setState는 해당 로직을 한번에 batch update를 한다.
• 확인하는 방법은 onIncrease 함수내에 setNumber를 실행 이후 함수안에서 console.log(number)를 해보면 변경되기 전 값인 0이 나오게 된다.
• 이유는 이러한 문제를 해결하기 위한 방법이 몇가지 있다.

 

react batch update

• state 값을 변경하면 해당 컴포넌트와 그 자식컴포넌트들은 리렌더링이 일어난다.
• state가 여러개 있을 경우 각각의 업데이트를 하게 된다면 리렌더링이 여러번 일어나서 성능에 영향을 미치게된다.
• 이를 해결할 방법으로 React batch updating 이 생겼는데 이는 컴포넌트의 렌더링 횟수를 최소화하는 방법으로서 State를 각각 업데이트 하는 것이 아닌 일괄 업데이트로 한번에 처리하여 렌더링 횟수를 최소화할 수 있다.

 

해결 방법

함수형 업데이트 

import React, { useState } from "react";

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

  const onIncrease = () => {
    setNumber((prev)=> prev + 1);
    setNumber((prev)=> prev + 1);
    setNumber((prev)=> prev + 1);
  };

  const onDecrease = () => {
    setNumber((prev)=> prev - 1);
    setNumber((prev)=> prev - 1);
    setNumber((prev)=> prev - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

• setState의 인자로 콜백 함수를 넘기게 되면 그 콜백함수의 인자에는 state값을 인자로 받을 수 있다.
• 이렇게 콜백 함수를 이용하면 업데이트 된 최신의 state와 함께 사용할 수 있다.
• 함수로 전달하게 되면 전달받는 함수들이 큐에 순서대로 저장되고 FIFO(Fisrt In First Out)구조를 가진 큐에서는 먼저 들어온 함수를 실행하므로 항상 최신의 state를 유지할 수 있다.

 

useEffect 활용

import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    console.log(number);
  }, [number]);

  const onIncrease = () => {
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

• useEffect를 이용해서 의존성배열에 number를 추가하면 number의 변경을 감지하여 즉시 업데이트 되는 것을 볼 수 있다.