나디아 성장 일기

[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..

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

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

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

📌 react-icons: React에서 아이콘을 쉽게 사용할 수 있게 해주는 라이브러리react-icons는 여러 아이콘 라이브러리에서 제공하는 아이콘들을 React 컴포넌트 형태로 제공한다.➡︎ JSX에서 직접 사용할 수 있다.➡︎ 아이콘의 크기, 색상, 스타일 등을 CSS로 제어할 수 있다.필요한 아이콘만 임포트하여 사용할 수 있어서 전체 라이브러리를 임포트하는 것보다 경량화된 애플리케이션을 만들 수 있다. React Icons react-icons.github.io  ⏩ 설치 npm install react-icons --save   ✅ 사용1. 원하는 아이콘 컴포넌트 불러오기 import { FaBeer } from 'react-icons/fa'; // FontAwesome 아이콘 임포트  ..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 데이터 가져오기 (Loader)⏩ loader() 함수: 특정 라우트가 렌더링되기 전에 데이터를 비동기적으로 로드하는 데 사용 서버에서 데이터를 가져오거나 비동기 작업을 처리한 후 페이지를 렌더링할 수 있도록 한다loader()는 특정 라우트가 활성화되기 전에 필요한 데이터를 미리 로드한다.➡︎ 페이지가 로드될 때 필요한 데이터가 이미 준비되어 있어 사용자에게 빠르게 콘텐츠를 제공한다. 특징비동기 데이터 로딩: loader()는 비동기 함수를 지원하여, 데이터를 비동기적으로 가져올 수 있다.라우트 기반 데이..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 검색엔진최적화(SEO) 설정 ⏩ react-helmet-async 활용: React 애플리케이션에서 동적으로 HTML 를 관리할 수 있게 해주는 라이브러리 리액트의 단점 ➡︎  React는 하나의 index.html을 두고 있기 때문에 페이지 마다 페이지를 설명하는 메타태그를 설정하기 어렵다. ➡︎ SEO가 어렵다. SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 메타 태그, 타이틀, 링크 태그 등을 관리할 때 사용 기존의 react-helmet 라이브러리를 비동기적으로 사용할 수 있도록 개선한 버전..

📌 useReducer(): 복잡한 상태(state) 로직을 처리하는 상태 관리 훅 useState와 유사하지만, 상태(state) 업데이트 로직을 더 명확하게 분리하고 다양한 상태(state) 변화를 처리한다. 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서 함수를 사용한다.➡︎ 상태 변화는 액션에 의해 일어나며, 이 액션은 리듀서 함수에 전달된다. useReducer에서 사용하는 리듀서 함수는 순수해야 한다. ➡︎ 사이드 이펙트 코드가 들어가면 안된다. 사용상태(state) 변화가 복잡하고, 여러 가지 액션에 따라 다양한 상태 변경이 필요할 때상태(state)와 관련된 로직을 분리하여 관리하고 싶을 때리덕스(Redux)와 같은 상태 관리 패턴을 작은 컴포넌트 내에서 구현하고 싶을 때  ⏩ ..

📌 useContext(): 상위 컴포넌트에서 제공한 Context 값을 하위 컴포넌트에서 접근할 수 있는 훅상위 컴포넌트에서 ⬇️ 하위 컴포넌트로 데이터를 전달하는 데 사용 prop drilling(여러 단계의 prop 전달)을 피할 수 있다. 사용Context 생성: createContext를 사용하여 Context 객체를 생성Context 제공: Provider를 사용하여 하위 컴포넌트에 값을 제공Context 사용: useContext를 사용하여 Context의 값을 읽어옴   ✅ 사용  1️⃣ createContext(): 새로운 Context 객체를 생성컨텍스트는 기본적으로 데이터를 저장할 수 있는 공간을 만들고, 이 공간을 통해 데이터(상태, 함수 등)를 하위 컴포넌트들에게 전달한다. 상위..

📌 useDebugValue(): React 개발자 도구에 커스텀 훅에 라벨(디버깅 정보)을 추가할 수 있는 훅커스텀 훅에서 훅 내부 상태를 디버깅하는 목적으로 사용 개발 모드에서만 작동하며, 해당 훅을 사용하는 컴포넌트의 상태를 쉽게 파악할 수 있다.➡︎ 개발자 도구에서 해당 훅을 사용하는 컴포넌트를 선택하면, 디버깅 정보를 확인할 수 있다.앱의 성능에 영향을 미치지 않는다.  useDebugValue(value, formatFunction?)매개변수value: React 개발자 도구에 표시하고 싶은 디버깅 정보어떤 타입이든 될 수 있다. formatFunction : value를 인자로 받아 포맷팅된 문자열이나 객체를 반환하는 함수컴포넌트가 검사될 때, React DevTools는 value를 인자..