2023-03-03 금요일

✏️ 무엇을 배웠나

1. useRef로 돔 조작하기

리액트에서 특정 돔 노드에 접근해야 할 때가 있다, 나의 경우에는 채팅 메시지가 새로 생길 때마다 자동으로 채팅창의 가장 아래 화면을 보여줘야 해서 useRef를 사용했다.

useRef를 사용하면 리액트가 평소에는 자동으로 관리해주는 돔에 접근할 수 있고 아래처럼 사용할 수 있다.

// 먼저 useRef를 사용해 참조를 만들어주고
const scrollBottomRef = useRef(null);

// 참조값을 특정 노드에 전달해준다
<div ref ={scrollBottomRef}></div>

useRef는 current라는 객체를 반환하는데 current의 프로퍼티에 접근하면 scrollIntoView라든지 focus 같은 browser API를 사용하게 해준다.

const handleAutoScrollBottom = () => {
	scrollBottomRef.current.scorollIntoView
}

handleAutoScrollBottom 함수가 실행되면 해당 참조가 있는 노드(위에서는 div)로 스크롤이 자동으로 움직이는데, 이 div를 채팅창 가장 아래에 배치해두면 위 함수가 실행될 때마다 채팅창 가장 하단으로 자동 스크롤 다운이 된다.

2. useRef 사용할 때 유의할 점

리액트 공식문서에서는 useRef를 남용하지 말길 권장한다. 왜냐하면 리액트는 알아서 돔을 만들고 관리하고 있기 때문인데, 스크롤 이동 같이 단순한 조작이 아니라 돔 자체를 수정하려고 하면 에러가 생길 수 있다.