์ด์๊ฐ์ด, ์ฑํ ์ ์ ๋ ฅํ์๋ ์๋์ผ๋ก ์คํฌ๋กค์ ํด์ค์ผํ๋ ๋ถํธํจ์ด ์์๋ค.
"use client";
import { useEffect, useRef } from "react";
function MessageList({ messageList }) {
const scrollRef = useRef(null);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messageList]);
return (
<div className="overflow-scroll scrollbar-hide" ref={scrollRef}>
{messageList.map((message) => {
return (
<div>๋ฉ์์ง</div>
);
})}
</div>
);
}
export default MessageList;
์ฑํ ์์ญ์ useRef๋ฅผ ์ฃผ๊ณ , useEffect์ dependency์ธ messageList๊ฐ์ด ์ถ๊ฐ๋ ๋๋ง๋ค, ์๋์ผ๋ก์คํฌ๋กค์ ๋ด๋ ค์ค๋ค.
scrollTop ์์ฑ์ scrollHeight ์์ฑ ๊ฐ์ผ๋ก ์ค์ ํ๋๋ฐ, scrollTop์ ์์์ ์์ง ์คํฌ๋กค ์์น๋ฅผ ๋ํ๋ด๋ฉฐ, scrollHeight๋ ์์์ ์ ์ฒด ๋ด์ฉ ๋์ด๋ฅผ ํฌํจํ๋ค.
๐๐ป ์คํฌ๋กค ์์น๋ฅผ ์์์ ๊ฐ์ฅ ์๋๋ก ์ค์ ํ์ฌ ์ต์ ๋ด์ฉ์ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ฃผ๊ฒ ๋๋๊ฒ์ด๋ค.
'ํ๋ก์ ํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Firebase] ์ธ์ฆ ์ํ ์ ์ง, ์ ๊ทผ ๋ณดํธ (0) | 2024.06.27 |
---|---|
[Next.js] SEO ์ต์ ํํ๊ธฐ (0) | 2024.04.29 |
[emoji-picker-react ๐] ์ด๋ชจํฐ์ฝ ์ ๋ ฅ์ฐฝ์ผ๋ก input ๋ฐ๋๋ฐฉ๋ฒ (0) | 2024.04.25 |
[tailwind] max-width๋ก ๋ฐ์ํ CSS ์ ์ฉํ๊ธฐ (0) | 2024.04.24 |
[CSS] footer ํ๋จ ๋ฐฐ์นํ๊ธฐ (flex-grow ์ฌ์ฉ) (0) | 2024.04.24 |