널리 쓰이는 공통 컴포넌트란 무엇일까요? 제가 생각하는 공통 컴포넌트란 특정 도메인에 종속되어있는 컴포넌트가 아닌 프로젝트 전반에 걸쳐 사용되는 컴포넌트를 말합니다.예를 들면 Checkbox 또는 Radio , Switch 등등의 컴포넌트를 말합니다. 회사에 입사하고서 첫 배정받은 작업은 기존 레거시 컴포넌트의 개선 작업이였습니다. 이 내용을 공유 드리고자 합니다. 제어상태로만 동작하는 컴포넌트 interface CheckboxProps { checked: boolean; onChange: (checked: boolean) => void;}function Checkbox({ ...props }: CheckboxProps) { const { checked, onChange } = props; re..
Reasct Developer Tools란? Reasct Developer Tools란 React로 만들어진 웹앱의 성능측정을 도와주는 도구입니다. 컴포넌트의 렌더링 속도, 컴포넌트 리렌더링시 하이라이트 강조기능 등의 기능이 있습니다. 불필요한 리렌더링 발생 채팅을 칠 때마다 채팅방 리스트, 채팅방 헤더 부분이 Hilight 되며 강조되고 있습니다. 이는 해당 컴포넌트들이 리랜더링이 되고 있다는 뜻이므로 불필요한 리랜더링이 발생한다고 파악할 수 있겠습니다. 리랜더링의 원인 export default function ChatRoom({ title, }: { title: string; }) { const [currentChatList, setCurrentChatList] = useState([]); cons..
createPortal 이란? https://react.dev/reference/react-dom/createPortal createPortal – React The library for web and native user interfaces react.dev 리액트에서 제공하는 메서드로써 UI요소를 DOM 계층 구조에서 분리된 다른 DOM 노드로 렌더링 할 때 사용되는 메서드입니다. 일반적으로 모달,드랍다운메뉴,툴팁 등 과 같이 현재 컴포넌트와 관련이 없는 DOM 요소에 UI를 렌더링 할 때 사용되는 메서드입니다. 구현 비하인드...😃 프로젝트 초창기 역할분담을 했는데 제가 아닌 다른팀원분이 모달이 구현해 주기로 하셨습니다. 하지만 모달을 맡았던 팀원분이 구현을 해주셨지만 중간에 하차를 하게되었습니다...
사이드프로젝트에서 채팅룸에 현재 참여하고 있지 않은 유저들을 닉네임으로 검색한 후 초대하는 기능을 구현하였습니다. 검색된 유저들을 불러오는건 React-query의 useQuery를 사용하여 데이터를 fetching 하였습니다. import { getSearchedUserList } from '@/service/chatRoom'; import { useQuery } from '@tanstack/react-query'; export default function useGetSearchedUserList( roomId: string, nickname: string, ) { const { data, isLoading } = useQuery({ queryKey: ['searchedUserList', nickna..
