느려도 한걸음씩

🧠 useCallback에 대해 알아보자 useCallback 훅은 useMemo와 마찬가지로 컴포넌트를 최적화하기 위해 사용하는 memoization 기법 중 하나입니다. 두 훅은 모두 첫 번째 인자로 콜백 함수, 두 번째 인자로 의존성 배열을 받습니다. 하지만 중요한 차이점이 하나 있습니다 ✅ useMemo는 값을 memoization하고,✅ useCallback은 함수 자체를 memoization합니다.왜 함수도 memoization이 필요할까? 자바스크립트에서 함수는 객체입니다. 따라서 컴포넌트가 재렌더링될 때마다 함수는 새로 생성됩니다. 이렇게 매 렌더링마다 동일한 로직을 가진 함수가 새로 만들어지면, 해당 함수가 의존성으로 연결된 useEffect나 React.memo 등에서 불필요하게 재실..

useMemo는 컴포넌트의 성능을 최적화할 때 사용하는 React 훅입니다. 리액트 컴포넌트는 상태(state)나 props가 변경될 때마다 다시 렌더링되며, 이 과정에서 내부에 선언된 함수들도 다시 실행됩니다. 만약 컴포넌트 내부에서 연산 비용이 큰 함수가 실행된다면, 불필요한 계산이 반복되면서 성능 저하로 이어질 수 있습니다. 이때 useMemo를 사용하면, 특정 연산의 결과를 메모이제이션(memoization) 하여, 의존성 값이 변경되지 않는 한 이전 결과를 재사용하게 할 수 있습니다. ✅ useMemo 기본 문법const memoizedValue = useMemo(() => { // 연산 결과를 반환하는 콜백 함수 return 계산값;}, [의존성 배열]); 첫 번째 인자는 계산 결과를..

🛡️ react-error-boundary로 컴포넌트 에러를 간단하게 처리해보자에러는 어플리케이션을 만들 때 반드시 고려해야 할 중요한 요소 중 하나입니다. 개발 중에는 오류 메시지를 보고 직접 수정할 수 있지만, 사용자가 앱을 사용하는 도중에 에러가 발생하고 이를 적절히 처리하지 못하면 앱이 멈추거나 화면이 깨질 수 있습니다.이를 방지하려면 에러 발생 시 사용자에게 적절한 안내를 하고, 앱이 완전히 크래시(crash)되는 상황을 막는 처리가 필요합니다. ⚙️ React에서의 에러 처리 — Error BoundaryReact에서는 렌더링 도중 오류가 발생했을 때 이를 감지하고 fallback UI를 보여줄 수 있는 기능인 Error Boundary를 제공합니다.Error Boundary는 컴포넌트 렌..

💡Compound Component 패턴이란?Compound Component Pattern은 여러 개의 관련된 컴포넌트를 하나의 "조합 가능한 컴포넌트 그룹"으로 구성하는 패턴이다.사용자 입장에서는 HTML 태그처럼 직관적으로 중첩해서 쓸 수 있고, 내부적으로는 상태를 공유하며 유기적으로 동작한다.  🎯 예제로 보는 Compound Component먼저 아래처럼 Counter 컴포넌트를 사용한다고 가정하자 My super flexible counter 마치 HTML 태그처럼 의미 있게 읽히는 이 구조는 사실 하나의 부모 컴포넌트(Counter)가 자식 컴포넌트들과 상태를 공유하도록 설계되어 있다. 🛠 구현 방법1. Context 생성Counter 상태를 자식 컴포넌트들과 공유하려면 R..

🧩 HOC(Higher-Order Component)란?HOC는 컴포넌트를 인자로 받아, 새로운 컴포넌트를 반환하는 함수입니다.주로 공통 로직을 재사용하거나, 기능을 확장할 때 사용되는 React 패턴 중 하나입니다.React에서는 아래와 같은 형태로 자주 등장합니다: const EnhancedComponent = withSomething(OriginalComponent); const products = Array.from({ length: 20 }, () => { return { productName: faker.commerce.productName(), description: faker.commerce.productDescription(), price: faker.commerce...

Render Props 패턴React 애플리케이션을 개발하다 보면 공통적인 UI 구조에 서로 다른 데이터를 넣어야 하는 상황을 자주 마주하게 됩니다.그럴 때 유용하게 쓸 수 있는 패턴 중 하나가 바로 Render Props 패턴입니다.이번 글에서는 실제 예제 코드를 통해 Render Props가 무엇인지, 그리고 적용 전후의 차이점과 장점을 살펴보겠습니다.   다음은 List 컴포넌트를 사용한 예제입니다. 이 컴포넌트는 products나 companies 같은 데이터를 받아 리스트를 렌더링합니다.import { useState } from "react";import { faker } from "@faker-js/faker";import "./styles.css";const products = Array...

📘 React Pattern 이란?React를 사용하다 보면 점점 더 복잡한 UI와 상태를 다뤄야 하고, 다양한 기능이 서로 얽히기 시작합니다.이때, 일관된 구조로 컴포넌트를 설계하고, 더 효율적으로 코드를 관리하기 위한 방법론이 바로 React 패턴입니다.🧩 React 패턴이란?React 패턴은 React 앱에서 자주 반복되는 구조나 로직을 효율적이고 재사용 가능한 방식으로 구현하기 위한 설계 방식입니다.쉽게 말해, 잘 작동하고 유지보수가 쉬운 구조를 만들기 위한 정해진 "코딩 습관"이라고 생각할 수 있어요.예를 들어,데이터를 가져오는 로직을 재사용하고 싶을 때 Custom Hook여러 컴포넌트가 상태를 공유할 때 Compound Component Pattern반복적인 UI 로직을 분리하고 싶을 때..

이번 포스트에서는 React Router의 useLoaderData 훅을 사용해 데이터를 패칭하고 관리하는 방법에 대해 알아보겠습니다. 기존의 useEffect와 useState를 사용한 방식보다 간단하고 선언적인 방식으로 데이터를 다룰 수 있어, 더 깔끔한 코드 작성이 가능합니다.  기존 방식: useEffect로 데이터 패칭아래는 EventPage 컴포넌트에서 useEffect를 사용해 이벤트 데이터를 가져오는 예제입니다.import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./Page/HomePage"; // 폴더 구조 맞는지 확인import RootLayout from "./compon..