[React] useState에서 setState의 콜백함수

Seju·2023년 8월 23일

목록 보기

4/9

useState에서 setState가 받을 수 있는 콜백함수

🐶 콜백함수를 사용한 setState

const [state,setState] = useState(initalState)

useState hook을 사용할 때, 배열의 첫번째 순서는 상태(state) 이고, 두번째는 상태를 업데이트하는 상태 업데이트함수(setState)이다.
useState 내부에는 initalState, 즉 상태의 초기값을 나타낸다.

setState를 사용하는 방법은 두가지가 존재한다

1. 값을 기반한 업데이트

이전 state를 사용하지않고 setState내부에서 업데이트할 값을 인자로 받는다.
이 방법은 아마 익숙할것이고, 또 많이 써왔을 일반적인 useState에서 state 상태값 변경 로직이다


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

  const handleIncrement = () => {
    // 기본적인 setState 사용
    setCount(count + 1); // 새로운 값을 설정
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

2. 콜백함수를 사용한 setState

콜백함수를 사용한 setState가 이글을 쓰게된 주된 이유인데, 해당 setState는 React 엔진 내부에서 어떤 조건처리로 인하여, 콜백함수를 인자로 전달받을 수 있다. 해당 콜백함수는 이전 상태값(prevState)를 인자로 받아 새로운 값을 반환할 수 있다.
해당 콜백함수를 사용한 setState는 이전 상태 값에 기반한 업데이트라고 부르며, 객체나 배열같은 복잡한 상태를 변경해야할 때 주로 쓰인다.

function ComplexStateExample() {
  const [user, setUser] = useState({
    name: 'Seju',
    age: 26,
    email: 'seju@gmail.com'
  });

  const handleUpdateAge = () => {
    // 이전 상태 값을 기반으로 새로운 값을 계산하여 업데이트
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={handleUpdateAge}>Increase Age</button>
    </div>
  );
}

위 코드에선 user 상태가 객체로 관리되고 있으며, setUser에서 콜백함수를 이용해 이전 상태 값(prevUser)을 기반으로 새로운 객체를 생성하여 업데이트하고 있다.
여기서 setUser 내부의 콜백함수에 인자로 전달한 prevUser는 useState로 관리되는 user상태의 이전 값을 나타낸다.
useState로 호출할때 초기값으로 지정한 값인 user가 초기값이 되고, 이후 setUser를 호출해 user의 상태가 업데이트되면, React에서는 user의 상태를 자동으로 관리하며, 그 이전 값을 prevUser로 제공하는 형태이다.

❓ setState 함수 내 콜백함수에서 `return` 키워드를 사용하지 않아도 객체나 값이 반환되는 이유

화살표 함수에서 단일 표현식으로 이루어진 경우, 자동으로 그 표현식의 결과가 암시적으로 return되기 때문이다.
따라서 아래 코드는 동일한 코드이다

// return 키워드 사용
const handleUpdateAge = () => {
  setUser(prevUser => {
    return {
      ...prevUser,
      age: prevUser.age + 1
    };
  });
};

// 암시적 반환
  const handleUpdateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

❓ 암시적 반환에서 왜 () => 이후에 ()로 감싸나요

javascript 문법에서 중괄호 {}는 여러곳에서 사용된다.
prevUser 이후에 ({...prevUser, age: prevUser.age + 1 }) 부분은 실제로 객체 리터럴을 생성하고 반환하는 부분인데, 이 부분을 ()로 감싸는 이유는 Javscirpt 문법적으로 인해 발생한다.
로직에서 중괄호가 어떤 의미를 갖는지 혼란을 피하기 위해, 객체 리터럴을 반환하는 화살표 함수를 사용할 때는 중괄호 앞에 괄호 ()로 감싸주는 것이 React 커뮤니티에서 관례로 쓰이고 있다
따라서, 객체 리터럴을 반환하는 경우에는 코드의 가독성과 혼동을 방지하기 위해 ()로 감싸는 것을 습관화 하자!