React | setState를 함수형으로 해야 하는 이유는?

AEHEE·2023년 12월 27일

React batch setState setter

React

목록 보기

16/17

왜 함수형으로 setState를 할까?

setter의 batch란?

상태관리를 어떻게 하면 좋을까?를 생각하다가 평소에 깊이 생각하지 않았던 부분을 생각하게 되었다. setState는 업데이트 할 부분을 포함하는 객체를 인자로 받는다.

📌 왜 함수형으로 setState를 할까?

상태를 변경할 때 !state 대신에 prev => !prev 형태를 사용하는 것을 권장하는 글을 읽으셨을 것입니다.
setState는 상태를 비동기적으로 업데이트하기 때문에 때로는 예상치 못한 방식으로 동작할 수 있다. 따라서 내가 원하는 시점에 상태를 가져와 업데이트해야 할 때, 이전 상태를 전달하여 업데이트를 수행하는 것이 중요하다.

import React, { useState } from 'react';

const ExampleComponent = () => {
  // 상태 초기값은 false
  const [isToggle, setToggle] = useState(false);

  // 이전 상태를 전달하여 업데이트
  const handleToggle = () => {
    setToggle(prev => !prev);
  };

  return (
    <div>
      <p>상태: {isToggle ? '켜짐' : '꺼짐'}</p>
      <button onClick={handleToggle}>토글</button>
    </div>
  );
};

export default ExampleComponent;

이 예제에서 handleToggle 함수는 setToggle을 호출할 때 prev => !prev 형태로 사용되어 이전 상태를 전달하고, 그에 따라 상태가 토글되도록 구현되어 있습니다. 이 방식은 상태 업데이트가 비동기적으로 이뤄질 때 예상치 못한 결과를 방지하면서도 정확한 이전 상태를 사용하여 업데이트할 수 있도록 도와준다.

이를 위해 외부에 함수를 선언하고 필요한 곳에서 가져와 사용할 수도 있다. 이런 방식은 상태 업데이트 로직을 중앙화하여 코드를 더욱 명확하고 관리하기 쉽게 만들 수 있음!

📌 setter의 batch란?

리액트가 여러번 setState를 동작하게되면 batching하여 작업한다.
풀어서 이야기 하자면, setState의 setter 함수가 "batched"라는 것은 React가 상태 업데이트를 여러 번 호출할 때, React가 내부적으로 이를 효율적으로 처리하는 메커니즘을 의미한다. 이것은 React가 상태를 업데이트할 때 모든 setState 호출을 모아서 처리하고 한꺼번에 렌더링을 수행하는 것을 의미한다.

import React, { Component } from 'react';

class BatchedUpdatesExample extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    // 여러 번의 setState 호출이 있지만, React는 이를 batched updates로 처리
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    console.log('Rendering with count:', this.state.count);

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

export default BatchedUpdatesExample;

상태 업데이트를 "batched updates"로 처리하여 성능을 향상시키고 불필요한 렌더링을 최소화한다. 위 예제를 콘솔로 찍어보면 중복 렌더링이 발생하지 않고 하나의 업데이트만 하고 있다는 걸 알 수 있다.
useState를 사용하는 경우에도 동일한 batched updates가 적용된다.