티스토리 뷰

Project/GPTea.tsx

GPTea☕️ 스크롤 위치 지정

hahagarden 2023. 5. 26. 22:25

지난번 학습한 createAsyncThunk를 이용하여 chats와 messages를 실시간으로 업데이트합니다.

이번에 채팅 UI를 구현하면서 가장 최신의 메세지가 있는 가장 아래로 스크롤이 위치하도록 구현했습니다.
해당 내용은 다음 포스팅에서 볼 수 있습니다.

 

React useRef 사용하기 with TypeScript

useRef는 컴포넌트 내부에서 직접 DOM을 조작해야 할 때 사용합니다. React에서도 바닐라 자바스크립트와 마찬가지로 JSX 엘리먼트에 id속성을 부여하고, 자바스크립트로 document.getElementById(id)를 통해

hahagarden.tistory.com

 

결과

아직 ChatGPT API를 연동하지 않아(마지막에 할 예정) 서버에서 답변이 오는게 아니라 단순 텍스트만 보냅니다.
그래도 메세지를 등록할 수 있고 실시간으로 답변이 옵니다.
스크롤이 가장 아래로 오도록 하여 최신 메세지를 볼 수 있습니다.

반응형
저작자표시

'Project > GPTea.tsx' 카테고리의 다른 글

GPTea☕️ useRef로 useEffect 실행 횟수 제어하기  (0) 2023.08.01
GPTea☕️ 스타일링 변경  (2) 2023.06.06
GPTea☕️ createAsyncThunk로 비동기 액션 생성하여 서버 데이터 상태 관리  (0) 2023.05.14
GPTea☕️ Redux Toolkit 도입, NewChat POST 요청  (0) 2023.05.13
GPTea☕️ 서비스 로그인 / 로그아웃 구현, fetch API를 axios로 변경  (0) 2023.05.11
댓글