들어가며안녕하세요, 새하(seha)입니다.오늘은 NextJS - SSR 구현에 TanStack Query를 사용하는 방법을 알아보려고 합니다. 간단하게 진행하고 있는 팀 프로젝트에서 프론트팀은 데이터 패칭에 TanStack Query를 사용하고 있습니다. 자동 캐싱, 캐시 유지, 자동 리패칭, 로딩, 에러 상태 관리, Mutation 지원처럼 널리 알려진 장점과 더불어 무한 스크롤, 페이지네이션 구현이 쉽다, 실무에서 많이 쓰인다라는 점 때문에 채택하게 되었습니다. 또 Next 이전, React에서 TanStack Query를 사용하던 것이 관성적으로 넘어온 것도 있습니다. Next를 활용하면서 SSR을 고민하고, 데이터 패칭 구현할 때 저희는, 마찬가지로 TanStack Query를 사용하고 싶었습니다..

구글 - Geist, Geist Monohttps://fonts.google.com/?query=geist 구글 - Space Groteskhttps://fonts.google.com/specimen/Space+Grotesk

hooks 생성// useWheelScroll.jsimport { useRef, useEffect, useCallback } from "react";/** * 마우스 휠 이벤트를 가로 스크롤로 변환하는 커스텀 훅 * * @param {Object} options - 설정 옵션 * @param {number} [options.scrollSpeed=1] - 스크롤 속도 배수 (기본값: 1) * @param {"auto" | "smooth"} [options.behavior="smooth"] - 스크롤 동작 (기본값: "smooth") * @returns {Object} scrollRef: 스크롤 컨테이너에 할당할 ref */export default function useWheelScroll({ scroll..

들어가며리액트는 UI (사용자 인터페이스)를 구축하기 위한 인기 있는 라이브러리 중 하나로, 컴포넌트 기반 설계가 핵심입니다. 리액트 컴포넌트는 생명주기라는 개념을 통해 생성, 업데이트, 제거 과정을 관리하며, 이는 애플리케이션의 동작 방식에 큰 영향을 미칩니다. 오늘은 리액트 생명주기의 각 단계를 살펴보고, 클래스형 컴포넌트와 함수형 컴포넌트에서 생명주기를 어떻게 다룰 수 있는지 알아보겠습니다. 요약리액트는 UI를 구성할 때 컴포넌트를 기반으로 동작하며, 각 컴포넌트는 마운트(Mount) > 업데이트(Update) > 언마운트(Unmount)의 과정을 거침해당 과정을 생명주기(Lifecycle)라고 부르며, 적절한 타이밍에 API 호출, 이벤트 등록/해제, 메모리 관리 등을 수행할 수 있음함수형 컴포넌..

들어가며React로 애플리케이션을 개발할 때, 배열 데이터를 화면에 렌더링하는 것은 매우 일반적인 작업입니다. 이 과정에서 `key`는 React의 성능 최적화와 UI의 안정성을 유지하는 데 중요한 역할을 합니다. 이번에는 key의 개념, 사용법 그리고 관련된 주요 개념들을 정리해보겠습니다. 요약React에서 key는 배열 렌더링 시 필수적인 요소로, 성능 최적화와 UI의 안정성을 유지하는 데 중요한 역할을 합니다. 올바른 key를 설정하면 효율적인 DOM 조작이 가능하며, 유지보수성과 가독성도 향상됩니다. key를 사용할 때는 항상 고유한 값을 선택하고, 배열의 index는 피하는 것이 좋습니다. 이를 통해 더욱 안정적이고 성능 좋은 React 애플리케이션을 개발할 수 있습니다. 배열 렌더링과 keyk..

들어가며React를 사용하다 보면 컴포넌트의 리렌더링과 관련된 성능 최적화를 고민해야 할 순간이 찾아옵니다. 이때 유용하게 사용할 수 있는 두 가지 훅이 바로 `useMemo`와 `useCallback`입니다. 이번 글에서는 이 두 훅의 개념, 사용법 그리고 활용 사례까지 알아보겠습니다. 요약`useMemo`와 `useCallback`은 React에서 성능 최적화를 위한 강력한 도구입니다.하지만 사용 목적에 맞게 신중히 활용해야 하며, 남용은 피해야 합니다.실무에서 큰 데이터 처리, 자식 컴포넌트 최적화 등 상황에서 유용하게 사용될 수 있습니다. useMemo, useCallbackuseMemo와 useCallback이란?useMemo`useMemo`는 값을 메모이제이션하는 데 사용됩니다. 특정 연산의 ..

들어가며리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나로, 그 핵심은 효율적이고 직관적인 렌더링(Rendering)입니다. 이번에는 리액트 렌더링에 대해 기본 개념을 알아보겠습니다. 간단 키워드리액트 렌더링렌더링 발생 조건최적화 방법Reconciliation리액트 렌더링리액트에서 렌더링이란?리액트에서 렌더링은 컴포넌트의 상태(state)나 속성(props)이 변경될 때, UI를 갱신하기 위해 화면에 요소를 다시 그리는 과정을 의미합니다. 이 과정은 효율성을 위해 가상 DOM (Virtual DOM)을 사용합니다. 리액트는 변경 사항만 계산해 실제 DOM 업데이트를 최소화함으로써 성능을 최적화합니다. 가상 DOM가상 DOM은 실제 DOM의 가벼운 복사본으로, 메모리에 저장되어..

들어가며리액트는 현대 웹 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 리액트 컴포넌트는 리액트의 핵심 개념으로, UI를 구성하는 기본 단위입니다. 이번 게시글에서는 리액트 컴포넌트에 대한 기본 개념을 알아보겠습니다. Keypoint상태 관리생명주기최적화설계 패턴 리액트 컴포넌트 시작하기리액트 컴포넌트란?리액트 컴포넌트는 UI를 구성하는 기본 단위로, 재사용 가능한 자바스크립트 함수 또는 클래스입니다. 컴포넌트는 prop (속성)을 입력받아 JSX를 반환하여 UI를 렌더링합니다. 컴포넌트의 종류함수형 컴포넌트자바스크립트 함수로 정의되며, React Hooks를 사용해 상태와 생명주기를 관리합니다.function Greeting(props) { return Hello, {props.name}!;..

in `package.json` ... "scripts":{ "start": "WATCHPACK_POLLING=true react-scripts start", "build": ..., ... } ... 이후 `npm start` 하면 수정 사항이 실시간으로 반영됨

들어가며웹 애플리케이션에서 성능과 효율성을 높이기 위해 React는 Virtual DOM이라는 개념을 도입했습니다. Virtual DOM은 실제 DOM을 추상화한 가상의 DOM 구조로, DOM 업데이트 과정을 최적화하여 빠르고 부드러운 사용자 경험을 제공합니다. 이번 글에서는 Virtual DOM의 정의부터 동작 방식, 장점 그리고 실제 DOM과의 차이점까지 살펴보겠습니다. Virtual DOMVirtual DOM이란?Virtual DOM은 실제 DOM의 가벼운 복사본으로, 메모리에서 동작하는 객체입니다. React는 상태(State) 변화가 있을 떄마가 새로운 Virtual DOM을 생성하고, 변경사항을 감지해 필요한 부분만 실제 DOM에 반영합니다. 간단 예제import React, { useStat..