리액트 개발자라면 usehooks-ts 라이브러리를 주목해야할 이유

리액트 개발자라면 usehooks-ts 라이브러리를 주목해야할 이유

커스텀 훅이란리액트에서 커스텀 훅(Custom Hook)은 이름이 ‘use’로 시작하며 내부에서 useState, useEffect와 같은 훅들이나 다른 커스텀 훅들을 호출하는 함수를 말합니다. 이는 반복되는 상태 관련 로직이나 사이드 이펙트 처리 로직을 컴포넌트로부터 분리하여 재사용 가능하게 합니다. 따라서, 잘 만들어진 커스텀 훅은 압도적인 재사용성과 가독성으로 리액트 개발자를 춤추게할 수 있습니다.참고자료 1 : React : 커스텀 Hook으로 로직 재사용하기usehooks-ts란?usehooks-ts는 타입스크립트를 완벽하게 지원하는 재사용 가능한 리액트 훅 라이브러리입니다. 이 라이브러리는 개발 과정에서 자주 사용되지만 직접 구현하기에는 번거로울 수 있는 다양한 로직들(예: 디바운싱, 스토리지..

  • format_list_bulleted 후기
  • · 2025. 5. 19.

react-grid-layout 사용법(with. TypeScript)

react-grid-layout이란?react-grid-layout은 React 애플리케이션에서 드래그 앤 드롭 및 크기 조절이 가능한 그리드 레이아웃을 손쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 사용자가 직접 아이템의 위치나 크기를 변경할 수 있는 동적인 대시보드나 인터페이스를 만들 때 매우 유용합니다.공식 문서와 예제가 잘 마련되어 있음에도 불구하고, 클래스형 컴포넌트 기반의 예시가 주를 이루고 타입스크립트 환경에서의 활용 예시가 부족하여 최신 React 프로젝트에 적용하는 데 어려움을 느끼는 경우가 있습니다. 이에 본 글에서는 react-grid-layout을 타입스크립트와 함께 사용하며 얻은 실용적인 노하우를 공유하고자 합니다.공식문서에는 구체적인 props 설명, 메모이제이션, 예제 ..

  • format_list_bulleted 위키
  • · 2025. 5. 8.
React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

배경AI 어시스턴스 앱을 개발하면서 채팅 UI를 구현하게 되었습니다. 사용자와 어시스턴트 간의 대화 메시지를 보여주는 Message 컴포넌트를 만들었습니다. 메시지 목록은 부모 컴포넌트인 Chat 컴포넌트가 배열 상태(messages)로 관리하며, 이 배열을 순회하며 각 Message 컴포넌트를 렌더링합니다.//Chat.jsximport { useState } from "React";import { Mesasge } from "./Message.jsx"export fucntion Chat(){ const [messages, setMessages] = useState([]); ... return ( ... {messages.map((message) =..

  • format_list_bulleted 회고
  • · 2025. 5. 4.
의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

배경React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었습니다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유합니다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

  • format_list_bulleted 회고
  • · 2025. 4. 24.
크롬 브라우저에서 한글 입력시 버그와 isComposing 속성

크롬 브라우저에서 한글 입력시 버그와 isComposing 속성

문제상황input(또는 textarea)에서 Enter 키를 눌러 메세지를 보내는 코드를 작성했습니다. 그런데 한글을 입력하고 Enter를 누르면 마지막 글자가 남는 버그가 발생했습니다. 그런데, 기묘하게도 영어나 숫자를 입력했을 때는 이러한 버그가 발생하지 않았고, 제출 버튼을 눌러서 제출했을때도 버그가 발생하지 않았습니다. 따라서, 한글입력과 키보드 이벤트와 관련한 이슈로 파악할 수 있었습니다.또한 이러한 이슈는 크롬 브라우저를 사용중인 경우에만 발생하였습니다.구글 검색을 통해 관련 이슈를 찾을 수 있었습니다.코드 수정수정전const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.prev..

  • format_list_bulleted 트러블슈팅
  • · 2025. 3. 27.
AbortController로 네트워크 요청 최적화 하기

AbortController로 네트워크 요청 최적화 하기

문제점웹 요청을 연달아 보내는 경우, 이전 요청들이 아직 처리 중인 상태에서 새로운 요청들이 계속 쌓이면서 병목 현상, 즉, 흐름이 막히는 현상이 발생할 수 있습니다. 경우에 따라, 사용자는 마지막 요청이 완료될 때까지 로딩을 기다려야 할수도 있습니다. 이는 매우 부정적인 사용자 경험으로 이어집니다. 예를 들어, 사용자는 서비스가 느리다고 느끼거나, 응답이 없다고 오해하여 페이지를 이탈할 수 있습니다.해결 방법1. HTTP/2 프로토콜을 사용하세요.HTTP/2 프로토콜이란?크롬 브라우저는 HTTP/1.1 프로토콜로 동일한 출처에 대해 동시에 6개의 TCP 연결만을 허용합니다. HTTP/2 는 브라우저에서 동시 요청에 제한이 없으므로 병목현상이 줄어듭니다. 이는 더 빠른 웹 통신을 위해 2015년에 도입..

  • format_list_bulleted 회고
  • · 2025. 3. 23.