useRef (scrollIntoView)

 

 

진행하던 프로젝트에 챗GPT openapi를 활용한 챗봇을 만들고 싶었다.

 

 

 

바로 이렇게!!

기능 구현은 모두 완료하였지만, 문제가 하나 남아있었다.

 

 

대화가 창을 넘어서면 최신 대화인 가장 하단으로 이동해야 하는데

그대로 상단만 노출되었다는 점....

 

useRef라는 개념을 사용하였다

 

 

useRef를 사용하는 경우는?

특정한 virtual Dom element를 선택하고자 할 때 사용한다. input을 강제로 focus 시키거나, 요소의 크기나 위치를 얻어야 할 때 등이 있을 것. 바닐라JS에서는 getElementById, querySelector와 같은 메서드로 특정 element를 선택해 이런 작업을 할 수 있었지만, 가상DOM을 이용하는 React에서는 렌더링이 끝나기 전에는 페이지에 해당 element가 존재하지 않기 때문에 해당 방식을 이용할 수 없다. 대신 useRef를 사용해 변수에 원하는 요소를 담을 수 있다는 점.

 

 

사용 방법은?

1. 원하는 변수명으로 useRef() 선언하기

const messagesEndRef = useRef(null);

 

   2. 선택하고자 하는 DOM node(virtual DOM element)에ref 속성 추가하기

<div ref={messagesEndRef} />

 

  3. 필요한 곳에서 변수명.current로 꺼내 쓰기!

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

 

 

위 코드 설명

1. const scrollToBottom = () => { ... }
   이 함수는 messagesEndRef라는 참조(ref) 요소로 스크롤을 이동시키는 역할을 합니다.
   • scrollToBottom 함수 내부에서 messagesEndRef.current가 참조하는 요소가 존재하는지(?.) 확인한 후, 요소가 있다면 scrollIntoView 메서드를 호출하여 해당 요소로 스크롤이 부드럽게 이동하게 됩니다.
   • scrollIntoView({ behavior: "smooth" }) 옵션을 사용해 부드럽게 스크롤합니다. { behavior: "smooth" }는 스크롤을 부드럽게(smooth) 진행하게 하는 옵션입니다.
2. useEffect(() => { scrollToBottom(); }, [messages]);
   이 useEffect 훅은 messages 배열이 업데이트될 때마다 scrollToBottom 함수를 호출하여 스크롤이 메시지 창의 맨 아래로 자동 이동하게 합니다.
   • [messages]는 useEffect의 종속성 배열로, messages가 변경될 때마다 이 훅이 다시 실행되도록 합니다.
   • 따라서, 새로운 메시지가 messages 배열에 추가되면 scrollToBottom()이 호출되어 화면이 맨 아래로 스크롤됩니다.

 

ScrollIntoView?

특정 엘리먼트가 있는 위치로 스크롤을 이동시킬 수 있는 자바스크립트의 내장메서드이다.

인자로 true/false 값 또는 option 객체를 받을 수 있다.

 

• true/false: true의 경우 해당 요소의 제일 윗부분, false의 경우 제일 아랫부분으로 스크롤이 이동한다.
• option 객체: {
  block:"start"/"end", -수직 요소에 대한 옵션 (각각 true/false와 같은 효과)
  inline: "start"/"left"/"center"/"nearest", -수평 요소에 대한 옵션
  behavior: "auto"/"smooth" -스크롤 시 smooth한 효과를 주고 싶을 때
  }

 

 

이렇게 완성 ~~~~~~~~~ !!