널리 쓰이는 공통 컴포넌트란 무엇일까요? 제가 생각하는 공통 컴포넌트란 특정 도메인에 종속되어있는 컴포넌트가 아닌 프로젝트 전반에 걸쳐 사용되는 컴포넌트를 말합니다.예를 들면 Checkbox 또는 Radio , Switch 등등의 컴포넌트를 말합니다. 회사에 입사하고서 첫 배정받은 작업은 기존 레거시 컴포넌트의 개선 작업이였습니다. 이 내용을 공유 드리고자 합니다. 제어상태로만 동작하는 컴포넌트 interface CheckboxProps { checked: boolean; onChange: (checked: boolean) => void;}function Checkbox({ ...props }: CheckboxProps) { const { checked, onChange } = props; re..
https://taejinii.tistory.com/84 Next.js Intercepting Routes 를 활용한 Modal 구현 Intercepting Routes란? 경로를 가로채어 현재 레이아웃 내에서 애플레이케이션의 다른 부분의 경로를 로드할 수 있는 것을 말합니다. https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes Rou taejinii.tistory.com 위의 글에선 Intercepting Routes를 활용하여 모달을 렌더링 하는 부분까지 소개를 해보았습니다. 이번 글에서는 쿼리 스트링으로 검색값을 활용하는 방법, Suspense를 사용하여 서버컴포넌트를 점진적으로 로딩하는 방법, error..
Intercepting Routes란? 경로를 가로채어 현재 레이아웃 내에서 애플레이케이션의 다른 부분의 경로를 로드할 수 있는 것을 말합니다. https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes Routing: Intercepting Routes | Next.js Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals. nextjs.org 해당 패턴을 사용하여 모달을 구현하면 상황에따라 여러 이..
Reasct Developer Tools란? Reasct Developer Tools란 React로 만들어진 웹앱의 성능측정을 도와주는 도구입니다. 컴포넌트의 렌더링 속도, 컴포넌트 리렌더링시 하이라이트 강조기능 등의 기능이 있습니다. 불필요한 리렌더링 발생 채팅을 칠 때마다 채팅방 리스트, 채팅방 헤더 부분이 Hilight 되며 강조되고 있습니다. 이는 해당 컴포넌트들이 리랜더링이 되고 있다는 뜻이므로 불필요한 리랜더링이 발생한다고 파악할 수 있겠습니다. 리랜더링의 원인 export default function ChatRoom({ title, }: { title: string; }) { const [currentChatList, setCurrentChatList] = useState([]); cons..
