[TIL] 0330 div아래에서부터 쌓기/ 리액트 무한스크롤/ 날짜별로 메세지 묶기/ 스크롤 맨 밑으로 내리기

1. div 아래에서 부터 쌓기

채팅을 하는데 가장 최근의 채팅이 아래에 있어야하고 

그러니까 위에서부터 순서대로 쌓이는게 아니라 밑에서 부터 순서대로 쌓여야하는 것이다.

export const MessageField = styled.div`
  padding: 15px 24px;
  overflow-y: auto;
  position: relative;
  height: 500px;
  box-sizing: border-box;
`;
export const MessageFieldInner = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  height: 500px;
`;

밑에서 부터 쌓일 영역에 position: absolute;와  bottom: 0;을 주면됨

 

 

 

2. 리액트 무한 스크롤  intersection observer

https://godsenal.com/posts/React-Intersection-Observer%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9D%B8%ED%94%BC%EB%8B%88%ED%8A%B8-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0/

React - Intersection Observer API를 사용하여 인피니트 스크롤 구현하기

 

https://velog.io/@ysg81/React-Intersection-Observer%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84

[React] Intersection Observer를 사용한 무한 스크롤 구현

 

 

3. 날짜별로 메세지 묶기

https://steadily-worked.tistory.com/593

[Next.js + TS] today i learned 7/17: 무한스크롤, 날짜별로 메시지 묶어주기

 

 

 

4. 이벤트 발생 시 스크롤 맨 밑으로 내리기

https://kyounghwan01.github.io/blog/React/event-scroll-bottom/#ref-%E1%84%82%E1%85%A5%E1%87%82%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%90%E1%85%A1%E1%84%80%E1%85%A6%E1%86%BA-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC

React.js - 이벤트 발생시 스크롤 맨 밑으로 내리기