[React] useRef로 스크롤 위치 조작하기

1. div에 스크롤 설정하기

const MessagesContainer = styled.div`
  	overflow: scroll;
	overflow-x: hidden;
`;

둘 중 하나만 써도 된다.

2. useRef 설정하기

function Room() {
const scrollRef = useRef();

 return (
   <MessagesContainer ref={scrollRef} />
  )
}

3. 스크롤 위치 설정하기

useEffect(() => {
	scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
});

useEffect를 사용하는 이유
1. 해당 div가 렌더링 완료되어야 그 ref 값을 에러없이(undefinded) 사용할 수 있다. 따라서 useEffect로 마운트 됐을 때 값을 사용하도록 한다.

2. 채팅창의 스크롤을 올린채로 닫고 다시 채팅창을 열어도 스크롤이 맨 아래에 위치하도록 하기 위함.