[React.js] 채팅구현 시 scroll(스크롤) 맨 밑으로 로드

안녕하세요~ 고집프로그래머 입니다.

 

오랜만에 허접한 포스팅을 시작해 보려고합니다.

 

요즘 react 공부 및 프로그래밍을 하고있어서 혹시 도움될까봐 글을 올려봅니다.

 

구글에 자꾸 찾아보려고 하는데 정보가 많지 않아서요 ㅠㅠ

 

제가 이번에 포스팅하는 것은, 채팅과 같이 대화형태의 프로그램을 짜는데 누군가 메세지를 보내면 해당 메세지 위치로 화면이 가야하는데 스크롤을 해야만 보이는 상황입니다.

즉, 대화형대라면

________________________________________________________________________________(화면상단)

상대방 : ㅎㅇㅎㅇ

나:ㅎㅇㅎㅇ

상대방: 반갑습니다. 무슨채팅?

나: 예시보여주는

상대방: 아하 ...

나: ㅋㅋㅋㅋ

___________________________________________________________________________________(화면 하단)

메시지 전송: ㅎㅇㅎㅇ (전송)

이러한 형식에 대화방에서 메세지를 전송하면 채팅대화가 올라가면서 ㅎㅇㅎㅇ가 바로 보여야하는데, react에서 focus를 해주지 않으면 사용자가 직접 스크롤을 해야하는 형태입니다.

 

설명이 좀 후지지만 ㅠㅠㅠ제가 작업하는 ui는 저작권이 걸려있으므로 사용할 수 없는...

 

즉, react에서 화면 render 할 때 scroll를 맨 밑으로 내리는 방식 입니다.

render에서는 아래와 같이 설정해줍니다.

일단 해당 <div>에 ref를 줍니다.

//채팅 리스트 를 불러옴

<ChattingMessageList />

//리스트 맨 밑을 focus 해야할 부분

<div ref={el =>{this.messageEnd = el; }} />

그리고 스크롤맨밑으로 보낼 함수를 정의해줍니다.

  scrollToBottom = () => {

    this.messagesEnd.scrollIntoView({ behavior: 'smooth' });

  };

 

그리고 로드 혹은 업데이트 시 해당 함수를 실행시킬 수 있도록 합니다.

componentDidMount() {

    this.scrollToBottom();

  }

  componentDidUpdate() {

    this.scrollToBottom();

  }

그럼 채팅 전송 입력 후 스크롤이 맨 밑으로 내려갑니다.

 

감사합니다.

 

출처 : https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react

How to scroll to bottom in react?