ref를 이해하려면 먼저 DOM을 완벽히 이해해야 한다.
DOM을 이해하려면 렌더링을 이해해야 한다!!

렌더링

웹 브라우저가 html을 해석하여 결과를 화면에 보여주는 과정

DOM

웹 브라우저가 HTML를 해석하는 과정에서 HTML 요소들을 트리형태로 구조화해서 표현하는 문서

ref(reference)

JS에서 특정 DOM 요소에 이름을 달 때는 보통 id를 사용한다.
그러나 react component id는 unique 해야하기 때문에 사용을 권장하지 않는다.
state로 해결 불가능하고 DOM에 직접적으로 접근해야할 때 사용한다.
ex) 특정 input에 포커스 주기, scroll 위치 조정, Canvas 요소에 그림 그리기 등

스크롤 위치 조정
ref가 js에서 id와 같은 개념이고, DOM을 가리킨다는 개념은 이해했다.
스크롤 위치 조정 메서드로 이해해보기 위해 책(Class Component)와 다르게 Function Component + useRef를 사용하여 스크롤을 맨 아래로 내리는 메서드를 만들었다.

import { useRef } from "react";
import styled from "styled-components";

function App() {
  const scrollRef = useRef();
  const handleScroll = () => {
    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  };
  return (
    <>
      <Container ref={scrollRef}>
        <Box />
      </Container>
      <button onClick={() => handleScroll()}>맨밑</button>
    </>
  );
}

const Container = styled.div`
  border: 1px solid #000;
  height: 300px;
  width: 300px;
  overflow: auto;
  position: relative;
`;

const Box = styled.div`
  width: 100%;
  height: 650px;
  background: linear-gradient(#fff, #000);
`;

export default App;

작업을 하면서 생긴 문제점들

1. 처음에 ScrollBox 컴포넌트를 따로 만들어 ref를 줬는데, 함수컴포넌트에는 ref를 사용할 수 없다, forwardRef랑 헷갈린게 아니냐고 계속 오류를 띄웠다. forwardRef는 상위->하위로 ref를 전달할 때 사용하는 것으로, ScrollBox 하위에 있는 Container의 ref를 사용해야하는 내 상황에서는 사용할 필요가 없었다.
   -> ScrollBox 안의 요소들을 꺼내 불필요한 ScrollBox 컴포넌트를 삭제하고 App에 Container와 Box를 가져왔다.

2. ref를 console.log로 찍어보면 current: 형식의 객체가 나온다. 사용할 때 꼭 ref.current. 형식으로 사용해야한다.

3. scrollTop과 scrollHeight 등 scroll값을 가져오는 요소의 속성에 대한 이해가 부족했고 비슷한 이름의 scrollTo 등 헷갈릴 법한 것들에 대해 따로 정리할 예정이다.

4. 처음 ref.current 등등 console.log를 찍을 때 undefined가 출력됐는데 당연하다.. Container에 ref를 주기 전이다. 렌더링 된 후엔 제대로 값이 출력된다.