나디아 성장 일기

[React] 리액트 라이브러리 모음

📌 리액트 라이브러리 모음  ✅ 날짜 선택 캘린더 컴포넌트 React DatePicker: 직관적인 날짜 선택 캘린더 제공  React Datepicker crafted by HackerOne reactdatepicker.com    ✅ 폼(form) 관리 컴포넌트  React Hook Form: 성능이 뛰어나고 유연한 폼 관리 & 큰 폼을 처리할 때 효율적이다. HomeReact hook for form validation without the hasslewww.react-hook-form.com    ✅ 입력칸 자동완성 컴포넌트 React Select: 사용자 입력을 기반으로 자동완성 드롭다운 제공, 다중 선택과 비동기 데이터 처리 가능하다. React-SelectA flexible and beau..

📌 IntersectionObserver 객체 : 웹 페이지에서 특정 요소가 화면에 보이거나 사라지는 것을 감지할 수 있는 도구 ex)  사용자가 페이지를 스크롤할 때 이미지가 화면에 나타나는 순간에만 그 이미지를 불러오게 하려는 상황에서 사용될 수 있다.      📌 intersectionObserve(): 새로운 IntersectionObserver 객체를 생성, 반환교차 관찰자 API브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰한다.➡︎ 사용자 화면에 지금 보이는 요소인지( 요소가 뷰포트에 포함되는지)를 구별하는 기능을 제공한다.사용 상황이미지나 동영상 로딩: 스크롤할 때, 이미지가 화면에 보이는 순간 이미지를 로딩하게 하고 싶을 때 사용된다.이를 통해 페이지 ..

📌 URL.createObjectURL(): Blob 객체나 File 객체를 사용하여 URL을 생성할 수 있게 해주는 메서드 자바스크립트의 웹 API 중 하나브라우저에서 동적으로 생성한 파일 데이터를 참조할 필요가 있을 때 사용한다.특징일회성 URL: URL.createObjectURL()로 생성된 URL은 페이지가 열려 있는 동안만 유효하다.브라우저가 해당 페이지를 새로 고침하거나 닫으면 더 이상 사용할 수 없다.메모리 사용: 생성된 URL은 메모리를 사용하므로, 사용이 끝난 후 URL.revokeObjectURL() 메서드를 호출하여 URL을 해제해야 한다.브라우저 호환성: 거의 모든 현대적인 브라우저에서 지원된다.사용 상황파일 업로드: 사용자가 업로드한 파일을 미리보기할 때 사용동적 이미지 생성:..

📌 Zustand : React에서 상태를 관리하기 위한 경량의 상태 관리 라이브러리 상태 스토어(store)를 쉽게 만들 수 있다.상태 스토어(store): 애플리케이션의 상태를 저장하고 관리하는 중앙 저장소상태 스토어를 사용하면 애플리케이션의 여러 컴포넌트에서 동일한 상태를 공유하고 관리할 수 있다.글로벌 상태를 내부에서 관리할 수 있다.장점독선적이지 않고, 특정 작업 방식을 강요하지 않는다.사전에 작성해야 할 예열(boilerplate) 코드가 적다.컨텍스트 프로바이더(provider)에 의존하지 않는다.컨텍스트(context)를 사용하는 것보다 더 빠르다.기본적으로 상태를 병합(merge)해 구문 작성이 편리하다.미들웨어(middleware)를 사용해 확장(extendable)할 수 있다.  ✨..

📌 crypto.randomUUID(): JavaScript에서 고유한 식별자(UUID, Universally Unique Identifier)를 생성하는 메서드 crypto 모듈에서 제공되며, UUID v4 형식으로 랜덤하게 생성된 문자열을 반환하여 식별자로 사용한다. 생성된 UUID는 128비트 길이의 8-4-4-4-12 형식의 32자리 16진수 문자열로 구성된다.ex) 123e4567-e89b-12d3-a456-426614174000cryptographically secure(암호학적으로 안전한)한 방식으로 난수를 생성하여 고유성을 보장한다.사용하는 상황데이터베이스에서 각 레코드에 고유한 ID를 부여할 때 사용된다.파일 이름을 중복되지 않도록 고유하게 생성할 때 사용된다.세션 ID, 토큰 등을 ..

📌 FormData: 웹 브라우저에서 HTML form(폼) 데이터를 쉽게 다루기 위해 제공되는 API폼 데이터를 JavaScript에서 읽거나 서버로 전송할 때 유용하다.기능폼 데이터 수집HTML 폼 요소의 데이터를 JavaScript 객체로 변환해서 수집할 수 있다.폼 데이터 전송AJAX 요청 등을 통해 서버에 폼 데이터를 전송할 때 편리하다.   ☑️ 메서드append(name, value): FormData 객체에 새 키-값 쌍을 추가하거나, 기존 키에 새로운 값을 추가한다.- 키가 없으면 새로 추가하고, 있으면 값이 추가된다.set(name, value): FormData 객체 내에서 주어진 키에 새 값을 설정하거나, 키가 없으면 새로 추가한다.delete(name): FormData 객체에서..

📌 collection(컬렉션): 특정 라이브러리/데이터베이스에서 데이터를 저장 & 관리하는 컨테이너 객체보통 데이터베이스 클라이언트 라이브러리에서 사용되며, 컬렉션(데이터베이스 테이블과 유사한 개념)과 상호작용할 수 있는 인터페이스를 제공한다.동일한 구조의 문서(Document)들을 저장하는 컨테이너 역할특정 라이브러리에서는 collection 객체를 사용하여 데이터를 생성, 조회, 업데이트, 삭제 등의 작업을 수행할 수 있다. 각 문서는 일반적으로 JSON 형식으로 저장되며, 고유의 ID를 가진다. 예시PocketBase: pb.collection('users') 같은 구문에서 collection은 PocketBase에서 특정 컬렉션을 참조MongoDB: db.collection('users') 같..

📌 lazy(): 컴포넌트를 지연 로딩(lazy loading)하기 위해 사용 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있다. 기본적으로 리액트 애플리케이션은 컴포넌트를 한꺼번에 모두 로드한다. ➡︎ 이로 인해 초기 로딩 시간이 길어질 수 있다. ➡︎ 이를 해결하기 위해 React.lazy를 사용한다.👉 React.lazy는 동적으로 컴포넌트를 로드할 수 있다. 👉 해당 컴포넌트가 실제로 필요할 때(렌더링할 때)까지 로드되지 않는다.반드시 Suspense와 함께 사용된다. ✨ Suspense: 컴포넌트의 로딩 상태를 처리하기 위한 컴포넌트비동기 작업이 완료될 때까지 기다리는 동안 사용자에게 보여줄 UI를 결정하는 역할React.lazy를 사용해 동적으로 로딩되는 컴포넌트를 ..

📌 clsx(): 자바스크립트에서 조건부로 클래스 이름을 결합하고 관리하는 데 사용되는 유틸리티 함수 여러 개의 클래스를 조건에 따라 동적으로 쉽게 결합할 수 있도록 도와준다. 불필요한 빈 문자열이나 null, undefined 같은 값들을 자동으로 걸러준다. 조건부 UI를 만들 때 매우 유용하다. 주로 React 프로젝트에서 많이 사용한다.  ⏩ 설치 npm install --save clsx   ✅ 사용 clsx 불러오기 import clsx from 'clsx';// orimport { clsx } from 'clsx';   ☑️ 기능 여러 개의 문자열 결합 clsx('foo', 'bar'); // 'foo bar' 배열 형태로 클래스 이름 결합clsx(['foo', 'bar']); // 'foo..

📌 컴포넌트 external 속성 : 부모 컴포넌트가 자식 컴포넌트에 전달하는 속성(props) 주로 링크 컴포넌트에 `isExternal` 속성 부여외부 링크와 내부 링크를 구분하기 위해 사용외부 링크isExternal 속성이 true로 설정된 경우 ➡︎ 외부 링크👉 target="_blank" 속성을 설정하여 링크가 새 탭에서 열리도록 할 수 있다.내부 링크isExternal 속성이 설정되지 않은 경우 ➡︎ 내부 링크👉 target="_self" 속성을 설정하여 현재 탭에서 열리도록 할 수 있다.   ✅ 사용 1. 상위 컴포넌트에서 해당 컴포넌트에 isExternal 속성 설정 Zustand {' '}   2. 설정 지정 noopener : 새 탭에서 열린 페이지가 원래 페이지의 wi..