🚀 SetState에 prevState를 사용하는 이유

State 와 useState ?

---

state (상태)는 컴포넌트가 가질 수 있는 변경 가능한 데이터다.

리액트 16.8 이전에는 컴포넌트가 상태를 갖기 위해서 클래스형 컴포넌트만 사용이 가능했다.

하지만 16.8 이후부터 hook을 이용해서 함수형 컴포넌트도 상태를 가질 수 있게 되었다.

그 hook이 바로 useState 다.

useState는 상태와 그 상태를 변경시킬 수 있는 set함수를 리턴한다.

useState의 인자로는 상태의 초기값이 들어간다.

기본적인 문법은 다음과 같다.

import React, {useState} from 'react'

const Counter = () => {
	const [count, setCount] = useState(0);

	return (
	  <h1>Count : {count}</h1>
	)
}

export default Counter;

SetState 함수와 prev

---

setState는 useState의 리턴값으로 state를 업데이트할 때 사용하는 함수이다.

이때, 보통 setState에서 state를 직접적으로 사용하여 업데이트를 하는 경우가 있다.

이는 틀린 방식은 아니지만 어떤 상황에서는 의도와 다르게 state를 업데이트 시킬 수 있다.

예를 한번 보자!

예시에서 Counter이라는 컴포넌트는 count와 randomNum이라는 state를 두개 가지고 있다.

버튼을 클릭하면 count는 1씩 증가하고 동시에 randomNum에도 랜덤한 새로운 숫자가 들어간다.

여기서 주의 깊게 봐야하는 것은 handleClick이라는 함수에서 setCount, setRandomNum을 같이 썼다는 것이다.

set 함수를 쓰게 되면 state 값이 변경되기 때문에 리액트에서 컴포넌트를 자동으로 리렌더링 시킨다.

따라서 set함수를 두개 쓰게 되면 리렌더링이 두번 일어날 것이라고 예상할 수 있다.

하지만 리액트는 똑똑하게도 batching이라는 것을 이용해서 여러개의 setState 함수를 하나의 리렌더링으로 처리할 수 있다.

그래서 console.log(’render’)을 통해서 리렌더링 횟수를 보면 버튼이 클릭될 때마다 콘솔창에 render가 한번만 증가하는 것을 볼 수 있다.

(기본적으로 2씩 증가하게 된다면 그것은 React.StrictMode로 인해 자동으로 컴포넌트가 더블 렌더링되도록 설정되어있기 때문이다. 만약 index.js에서 React.StrictMode를 제거하게 되면 한번씩 리렌더링 된다.)

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const [randomNum, setRandomNum] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setRandomNum(Math.floor(Math.random() * 10));
  };

  console.log('render')

  return (
    <div>
      <h2>Count : {count}</h2>
      <h2>Random Num : {randomNum}</h2>
      <button onClick={handleClick}>plus & new random</button>
    </div>
  );
};

export default Counter;

하지만, 신기하게 이 batching 때문에 서로 다른 set함수의 경우 state가 잘 업데이트 되지만 같은 set함수를 여러번 호출하는 경우에는 의도한 바와 다르게 state가 업데이트되지 않는 현상이 생긴다.

위의 예시를 조금만 변형해보자.

다음과 같이 setCount를 한번이 아닌 3번을 호출하고 setRandomNum을 한번 호출하면 어떤 결과가 나올지 한번 예상을 해보자.

원래 의도대로라면 count가 1씩이 아닌 3씩 증가해야 한다. 하지만 버튼을 클릭해 보면 1씩 증가함을 알 수 있다.

이는 위에서 설명한 batching 때문이다. batching은 여러개의 setState 함수를 하나로 묶어서 리렌더링을 한번만 한다고 했다.

따라서 setCount가 여러번 호출되었다고 해도 이를 묶어서 리렌더링이 한번만 일어나는 것이다.

리렌더링이 한번만 일어나기 때문에 3개의 setCount안의 count가 모두 같은 값이여서 1만 증가되는 것이다.

그렇다면 우리가 의도한 대로 count가 3씩 증가할려면 어떻게 해야할까?

count+3이어도 되지만 setCount를 지금처럼 3번 사용해도 된다.

하지만 이때, count를 쓰는 것이 아닌 콜백을 사용해서 prev 값을 사용해야한다.

prev는 set함수에서 제공하는 이전값이다. prev는 이전값을 저장하는 임시공간이기 때문에 리렌더링 없이도 업데이트된 값이 저장된다.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const [randomNum, setRandomNum] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
		setCount(count + 1);
		setCount(count + 1);
    setRandomNum(Math.floor(Math.random() * 10));
  };

  console.log('render')

  return (
    <div>
      <h2>Count : {count}</h2>
      <h2>Random Num : {randomNum}</h2>
      <button onClick={handleClick}>plus & new random</button>
    </div>
  );
};

export default Counter;

따라서 처음에 count+1 이 되어 1이 prev 값으로 저장되며 다음 setCount 함수에서 이 prev값을 이용하여 다시 1을 증가시킴으로써 prev 값이 2가 된다. 맨마지막 setCount에서 prev는 2가 되고 이를 1 증가시켜 최종적으로 3이 된다.

이렇게 prev 값을 업데이트 하는 경우에는 state를 직접적으로 사용하여 변경하기 보다는 prev를 사용하는 것이 좋다.

 const handleClick = () => {
    setCount(prev => prev + 1);          // 0 => 1
		setCount(prev => prev + 1);          // 1 => 2
		setCount(prev => prev + 1);          // 2 => 3
    setRandomNum(Math.floor(Math.random() * 10));
  };

배열 / 객체에서 prev 사용법

---

배열이나 객체의 경우 반드시 불변성을 지켜줘야한다.

따라서 배열의 경우에는 push, splice, sort과 같이 배열을 직접적으로 변경하는 메소드는 사용할 수 없다. 만약 사용하고 싶으면 기존의 배열을 복사해서 복사한 배열에 메소드를 사용해야 한다.

객체의 경우에도 배열과 마찬가지고 불변성을 지켜줘야 한다. 이때 주의할 것은 class component의 set함수는 기존의 object를 spread operator로 destructure 하지 않아도 자동적으로 기존의 object와 변경사항을 합쳐주었다. 하지만 useState의 hook은 자동적으로 이전 객체와 현재 객체를 합쳐주지 않기 때문에 spread operator로 destructuring 한 후에 새로운 value를 key를 통해서 업데이트 해줘야한다. 리액트 공식문서에 보면 다음과 같이 써져있다.

💡 < **주의 >**

클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다. 함수 업데이터 폼을 객체 전개 연산자와 결합함으로써 이 동작을 복제할 수 있습니다.

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

다른 방법으로는 useReducer가 있는데 이는 여러개의 하윗값들을 포함한 state 객체를 관리하는 데에 더 적합합니다.

주로, 이를 위해서 spread operator를 사용한다.

spread operator는 다음과 같이 사용하면 된다.

// 객체에서 하지 말아야할 것 : 변경할 key:value 값만 넣는 것
setState({name:value})

// 객체의 경우
setState(prev => {
	return {
		...prev,
		[name] : value
	}
}

// 배열의 경우
setState(prev => [...prev, newValue])

다음의 예시는 이름, 이메일, 나이를 입력하는 UserInfo 부분과 tag들을 입력하는 AddTag 부분이 있다.

그리고 그 아래에 이것을 출력하는 부분이 있다.

input의 값을 관리하는 userInfo state가 하나있고 입력하고 있는 currentTag state 한개와, tag들을 전체 관리하는 tags라는 state 하나가 있다.

userInfo와 같은 객체는 setState를 이용해서 value값을 업데이트할 때 key가 동적이므로 [key] 형식으로 작성을 해야한다.

import React, { useState } from "react";

const User = () => {
  const [userInfo, setUserInfo] = useState({
    email: "",
    name: "",
    age: 0
  });
  const [currentTag, setCurrentTag] = useState("");
  const [tags, setTags] = useState([]);

  const handleUserInfoChange = (e) => {
    const { name, value } = e.target;
    setUserInfo((prev) => {
      return {
        ...userInfo,
        [name]: value
      };
    });
  };

  const handleTagChange = (e) => {
    setCurrentTag(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setTags((prev) => [...prev, currentTag]);
    setCurrentTag("");
  };

  console.log("render");

  return (
    <div>
      <h2>User Info</h2>
      <input
        type="text"
        name="name"
        value={userInfo["name"]}
        placeholder="이름"
        onChange={handleUserInfoChange}
      />
      <input
        type="text"
        name="email"
        value={userInfo["email"]}
        placeholder="이메일"
        onChange={handleUserInfoChange}
      />
      <input
        type="number"
        name="age"
        value={userInfo["age"]}
        placeholder="나이"
        onChange={handleUserInfoChange}
      />

      <form onSubmit={handleSubmit}>
        <h2>Add Tag</h2>
        <input
          type="text"
          name="tags"
          value={currentTag}
          onChange={handleTagChange}
        />
        <button type="button">제출</button>
      </form>

      <h2>Print User & Tag</h2>
      <h3>-User</h3>
      {Object.keys(userInfo).map((key) => (
        <p key={key}>
          {key} : {userInfo[key]}
        </p>
      ))}
      <h3>-Tag</h3>
      {tags.map((tag, idx) => (
        <p key={idx}>{tag}</p>
      ))}
    </div>
  );
};

export default User;