React

React를 사용하여 무한 스크롤(infinite scroll) 기능을 구현하는 방법에 대해 공부해보자. 무한 스크롤은 사용자가 페이지를 스크롤할 때 추가 컨텐츠를 동적으로 로드하는 기능입니다. 이를 통해 사용자 경험을 향상시키고 페이지의 성능을 최적화할 수 있습니다. Intersection Observer란? Intersection Observer는 웹 페이지에서 요소의 가시성을 관찰하고 이벤트를 트리거하는 기능을 제공하는 웹 API입니다. 이 API는 스크롤, 뷰포트 크기 변경, 요소의 크기 변경 등과 같은 요소의 가시성 변경을 모니터링할 수 있습니다. 주로 무한 스크롤, 이미지 로딩 지연, 광고 표시 등 다양한 웹 페이지 기능에서 활용됩니다. Intersection Observer의 주요 메서드: ..

React Hook Form React-Hook-Form은 React 기반의 폼 관리 라이브러리로, 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줍니다. 이를 통해 개발자는 많은 부분을 직접 구현할 필요 없이 더욱 빠르고 효과적인 폼 개발에 집중할 수 있습니다. "React-Hook-Form은 성능이 우수하고 유연한 사용자 정의 훅을 제공하는 React 폼 라이브러리입니다. 이 라이브러리는 컴포넌트 중심의 개발 방식과 결합하여 매우 간단하고 직관적인 API를 제공합니다. React-Hook-Form을 사용하면 복잡한 폼 유효성 검사 로직을 쉽게 작성하고, 컴포넌트 상태를 간단하게 관리할 수 있습니다." 📚 React-Hook-Form 장점 1. 성능 최적화 React-Ho..

📌 svgr loader을 통해 컴포넌트로 사용 1. @svgr/webpack 설치 npm i -D @svgr/webpack 2. Next.js의 구성 파일(next.config.js)을 열고, 다음과 같이 설정해 줍니다. /** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, use: ["@svgr/webpack"], }); return config; }, }; module.exports = nextConfig; 3. 이제 SVG 파일을 컴포넌트로 변환하여 사용할 수 있습니다. import MySVG from '../compone..

🧐 Redux의 3원칙 1. Single source of truth (진실은 하나의 근원으로부터) 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다. 애플리케이션의 모든 상태는 하나의 store에 저장되며, 이 store는 읽기 전용입니다. 즉, 애플리케이션의 상태를 변경하려면 반드시 action을 dispatch하여 store에서 처리해야 합니다. 이렇게 함으로써, 애플리케이션 전체에서 일관된 상태를 유지할 수 있습니다. 2. State is read-only (상태는 읽기 전용) 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다. Redux에서는 상태(state)가 읽기 전용(read-only)이어야 합니다. 이는 R..

📌 개요​ Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. 아톰 (Atoms) 셀렉터 (Selectors) 공유 상태 (Shared State) 순수 함수 (Pure Function) 컴포넌트가 구독할 수 있는 상태 단위 아톰 상태 값을 동기 또는 비동기 방식으로 변환 📌 Atoms​ Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. atoms는 런타임에서..

React 상태 관리 라이브러리 Recoil은 Facebook에서 개발한 오픈 소스 라이브러리로, React 앱에서 상태 관리를 간단하고 유연하게 처리할 수 있게 해주는 라이브러리입니다. 이를 통해 상태 관리 코드의 가독성과 유지보수성을 향상시키고, 상태 변경에 따른 리렌더링 최적화를 제공하여 앱의 성능을 개선할 수 있습니다. 또한 비동기 처리 및 상태 파생 기능도 제공합니다. 📌 리코일 특징 Recoil의 특징은 크게 세 가지입니다. 첫째, "상태 공유의 유연함"이라는 점입니다. React 트리 구조에서 앱 상태를 끌어올렸을 때(Prop Drilling 또는 Context API) 하위에 종속된 컴포넌트가 업데이트 요구될 경우, 앱이 모두 리-렌더링 되는 문제가 있습니다. 하지만 Recoil은 Reac..

React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트입니다. Outlet 컴포넌트는 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링되는 위치를 지정합니다. const router = createBrowserRouter([ { path: '/', element: , // 상대 경로로 변환 children: [ { index: true, element: }, { path: 'events', element: , children: [ { index: true, element: }, { path: ':eventId', element: }, { path: 'new', element: }, { path: ':eventId/edit', elem..

custom HOC 재사용 가능한 로직을 분리해서 컴포넌트 사이에서 공유한다. 불필요한 추상 레이어(컴포넌트 래퍼)를 생성한다. 클래스, 함수 컴포넌트 모두 사용 가능 커스텀 HOC를 작성할 때는 관례적으로 with 접두사로 이름이 시작되지만, 절대적 규칙은 아님 ex) React.memo(Component) custom Hook 재사용 가능한 로직을 분리해서 컴포넌트 사이에서 공유한다. 불필요한 추상 레이어(컴포넌트 래퍼)를 생성하지 않는다. 오직 함수 컴포넌트 모두 사용 가능 훅의 규칙을 반드시 따라야 함 (함수 컴포넌트 또는 커스텀 훅 안에서만 사용 가능) 커스텀 훅을 작성할 때는 반드시 use 접두사로 이름이 시작되어야 한다. ex) React.useMemo(() => ) 토글 상태 관리 커스텀 ..