[TECH-QA] 리플로우(Reflow)와 리페인트(Repaint)는 브라우저의 렌더링 과정

// src/App.jsx
				
import { useState } from 'react';

function App() {
  const [boxStyle, setBoxStyle] = useState({
    width: '200px',
    height: '100px',
    margin: '20px',
    backgroundColor: 'lightblue',
  });

  const changeStyle = () => {
    setBoxStyle({
      width: '300px', // 리플로우 유발 (레이아웃 변경)
      height: '150px', // 리플로우 유발
      margin: '30px', // 리플로우 유발
      backgroundColor: 'lightgreen', // 리페인트 유발
    });
  };

  return (
    <div>
      <h1>리플로우와 리페인트 예제</h1>
      <div style={boxStyle}>
        테스트 박스
      </div>
      <button onClick={changeStyle}>스타일 변경</button>
    </div>
  );
}

export default App;

// src/App.jsx

import { useState, useCallback } from 'react';
import './App.css';

function App() {
  const [isTransformed, setIsTransformed] = useState(false);
  const [isColorChanged, setIsColorChanged] = useState(false);

  const toggleTransform = useCallback(() => {
    setIsTransformed((prev) => !prev);
  }, []);

  const toggleColor = useCallback(() => {
    setIsColorChanged((prev) => !prev);
  }, []);

  return (
    <div>
      <h1>최적화된 리플로우/리페인트 예제</h1>
      <div
        className={"box ${isTransformed ? "transformed" : ""} ${
          isColorChanged ? "color-changed" : ""
        }"}
      >
        테스트 박스
      </div>
      <button onClick={toggleTransform}>위치 이동 (Transform)</button>
      <button onClick={toggleColor}>색상 변경</button>
    </div>
  );
}

export default App;

/* src/App.css */
.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: lightblue;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.transformed {
  transform: translateX(100px); /* 컴포지팅만 유발 */
}

.color-changed {
  background-color: lightgreen; /* 리페인트만 유발 */
}