커리어리 기술 블로그?? (overflow-anchor를 아세요?)

커리어리에 채팅 기능이 있는 것 아시나요? 채팅과 관련된 이슈를 수정하면서 공유하고 싶은 것이 생겨 글을 쓰게 되었습니다. ------------------------------------ PM: 채팅을 치면 채팅방이 맨 위로 스크롤 되는데 스크롤 안되게 해주세요. 저: 왜요??? PM: 극단적으로 1,000개 중에 900번째 채팅방에서 채팅을 하면, 900번째 채팅방이 맨 위로 올라가는 건 괜찮지만, 스크롤이 맨 위로 올라가면서 바로 901번 방을 보고 싶으면 스크롤을 어마어마하게 해야 하잖아요? 저: 아하?! (카카오톡 PC도 그렇네….) 0. 문제 상황 커리어리의 PC 채팅 화면은 왼쪽에 채팅방 리스트가 있고 오른쪽에 대화창을 동시에 볼 수 있는 구조입니다. 왼쪽의 채팅방 리스트는 당연히 스크롤이 되고요. 채팅방을 선택하면 대화 내용을 볼 수 있어요. 근데 선택된 채팅방에서 채팅을 입력하면 왼쪽에 선택된 채팅방이 가장 위로 올라가면서 스크롤이 되더라고요. 1. 채팅하면 채팅방이 왜 가장 위로 올라갈까? 일단 오른쪽 대화창에서 채팅하면 최신 채팅 내용이 달라지고 이를 handler로 채팅방 리스트를 update 시켜줍니다. 순서가 재정렬되는 것이죠. 그러면 props가 변하게 되고 채팅방의 순서가 달라지는 거죠. 그래서 카카오톡처럼 최신 채팅이 맨 위로 가게 되는 겁니다. 2. 근데 왜 스크롤이 될까? 궁극적으로 찾아야 하는 원인은 스크롤이 왜 되는가였습니다. 왼쪽의 채팅방 리스트는 각각의 고유한 id 값이 있고 해당 id 값이 key 값으로 map을 통해 rendering 되고 있었습니다. 제가 생각한 방식은 키값이 그대로 있고 바뀐 순서의 채팅방만 새로 rendering 될 거로 생각했습니다. 3. 임시 해결? 키값에 문제가 있다고 생각했기 때문에 키를 변경해 보기로 했습니다. 고유 아이디와 index를 섞어서 키를 정해줬습니다. 모든 컴포넌트를 rendering 해보는 것이었습니다. 결과는 어떻게 되었을까요? 스크롤 되지 않았습니다. 오잉?????? 혼란에 빠졌습니다. 키값을 정의하는 공식 문서에 따르면 공식 문서에 의하면, React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고, 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.'라고 하는데 이렇게 스크롤이 마음대로 되는 거면 키를 안 써야 하는 것이 아닐까?? 4. 키를 인덱스로 이용해 정의하는 건 왜 되는지 모르지만, 올바른 방법은 아닌 것 같다. React.memo도 사용해 보고 렌더링 영역을 살펴보고 했지만, 스크롤이 이동하는 건 피할 수 없었습니다... 그러던 중 시니어 엔지니어분의 추측... 뭔가 모르는 동작이 브라우져에 숨어있는 것은 아닐까.... https://github.com/facebook/react/issues/27044 그러곤 위의 링크를 결국 찾아냈습니다! 링크에 있는 영상과 100% 동일한 현상이 제가 겪고 있는 일이었습니다. 5. 문제는 브라우져의 동작이었음. overflow-anchor라는 속성을 아시나요? focus 되어있는 부분으로 자동으로 anchor가 걸려있어서 스크롤이 되는 것이더라고요. 크롬 브라우져는 overflow-anchor: auto가 기본 옵션인 것 같습니다. 그래서 overflow-anchor: 'none'으로 수정하니 스크롤 문제를 해결했습니다!!! 놀랍게도 safari에서는 overflow-anchor: auto가 기본이 아닌 건지 아니면 구현을 안 한 건지 모르겠지만.. safari는 요구사항대로 잘 동작하고 있더라고요. 6. 그러면 index를 이용한 키는 왜 된 걸까? 이 질문에 대한 내용은 위 링크의 답변에 있습니다. ChatGPT가 번역해 준 걸 가져오면 key 프로퍼티를 아예 제거하면 React가 리스트의 개별 항목을 추적하는 기능이 비활성화됩니다. 이에 따라 리스트를 재정렬할 때 React는 각 리스트 항목을 새 요소로 처리하고 처음부터 다시 렌더링합니다. 요소들은 원래 순서대로 렌더링 되기 때문에 예상치 못한 스크롤 위치 변경이 없습니다. 라고 하네요. 7. 결론 - 예상치 못한 스크롤 이슈가 있을 때는 overflow-anchor를 확인해 보자. - 브라우저마다의 동작도 잘 확인하자. 해당 내용은 아마 다음 주에 업데이트 및 배포될 것 같네요. TMI로 PC 웹의 채팅 디자인도 많이 변경되었답니다. 사용해 보세요. :)