React 리팩토링 - 업데이트 되지 않는 값

리팩토링 전

문제점: log 객체가 렌더링 될 때마다 새로 생성되기 때문에 내부의 상태 변화가 유지되지 않습니다.

import React, { useState } from 'react';

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

  // 초기 객체 선언
  const log = {
    update: 0,
  };

  const handleIncrement = () => {
    setCount((prev) => {
      log.update += 1; // 업데이트가 제대로 되지 않음
      console.log(log);
      return prev + 1;
    });
  };

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

export default Counter;

 

 

리팩토링 후

개선점

- log 객체를 컴포넌트 외부로 선언하여 렌더링 시 객체가 재생성되지 않습니다.

import React, { useState } from 'react';

// 객체를 컴포넌트 외부로 이동
const log = {
  update: 0,
};

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

  const handleIncrement = () => {
    setCount((prev) => {
      log.update += 1; // 외부 객체는 변경 사항을 유지함
      console.log(log);
      return prev + 1;
    });
  };

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

export default Counter;