채팅 보내면 보낸 메세지로 스크롤 자동 내려가기(ScrollIntoView)

Today

오늘은 채팅에서 스크롤을 위로 이동시켜 이전 대화를 보다가 채팅을 보냈을 경우와 같이 채팅 메세지를 보냈을때, 현재 보낸 메세지 부분으로 자동으로 스크롤을 이동시켜주는 기능을 구현해보았다.   

1. useRef를 사용해 메세지를 나타내는 부분에 ref를 지정해 주었다. (html의 id와 같은 역할)
2. 메세지를 적어 보내는 역할을 하는 sendMessage함수가 실행되면 ref로 지정해준 scrollRef에 scrollIntoView함수가 발동하여 자동으로 내려가도록 해준다.
3. MDN웹사이트에서 가져온 사진을 참고하면 behavior와 block, inline의 의미와 다양한 적용 방법을 알 수 있을 것이다.  

아래의 동영상을 보면 메세지를 보냈을때 자동으로 스크롤이 내려가 현재 보낸 메세지를 보여주는 것을 잘 알 수 있을 것이다.