React Hook - useLayoutEffect

별코딩 자료 참조

import React, { useEffect, useLayoutEffect, useRef, useState } from "react";

function getNumbers() {
  return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
}

const App = () => {
  const [numbers, setNumbers] = useState([]);
  const ref = useRef(null);

  useEffect(() => {
    const nums = getNumbers();
    setNumbers(nums);
  }, []);

  useLayoutEffect(() => {
    if (numbers.length === 0){
      return;
    }

    for(let i = 0; i < 300000000 ; i++) {}

    ref.current.scrollTop = ref.current.scrollHeight;
  }, [numbers]);

  return (
    <>
      <button onClick={() => setNumbers([])}>Reset</button>
      <div ref={ref} style={{
      height: '300px',
      border: '1px solid blue',
      overflow: 'scroll'
    }}>
      {numbers.map((number, index) => (
        <p key={index}>{number}</p>
      ))}
    </div>
    </>

  )
};

export default App;