insu90 님의 블로그

1. 라우터 설정 (BrowserRouter)리액트 앱에서 라우터를 사용하려면 react-router-dom 라이브러리를 설치하고, 앱을 감싸는 BrowserRouter를 설정해야 합니다. 이를 통해 브라우저의 주소와 페이지를 동적으로 매핑할 수 있습니다.c:\javascript\my-cra-app> npm install react-router-domimport React from 'react'; // React 라이브러리 임포트import ReactDOM from 'react-dom/client'; // ReactDOM 라이브러리 임포트import './index.css'; // 스타일시트 임포트import App from './App'; // App 컴포넌트 임포트import reportWeb..

React에서는 상태를 전역적으로 관리하고, 여러 컴포넌트 간에 데이터를 쉽게 공유할 수 있는 방법을 제공합니다. 그 중 하나가 Context API입니다. Context API를 사용하면, 상태를 부모 컴포넌트에서 자식 컴포넌트로 props로 전달하지 않고도, 전역적으로 데이터를 관리하고 사용할 수 있습니다.이번 포스트에서는 테마를 전역 상태로 관리하는 예제를 통해 useContext 훅을 사용하는 방법을 소개합니다. Context API 사용법Context 생성: React.createContext()를 사용하여 Context 객체를 생성합니다.Provider 정의: Context.Provider를 사용하여 하위 컴포넌트들에게 값을 제공(전달)합니다.Context 소비: useContext 훅을 사용..

React 애플리케이션에서 성능 최적화는 중요한 부분입니다. 컴포넌트가 자주 리렌더링되면 불필요한 계산이 반복되어 성능에 영향을 미칠 수 있습니다. 이를 방지하기 위해 useMemo, useCallback, React.memo와 같은 성능 최적화 도구를 활용할 수 있습니다. 이 글에서는 이 세 가지 방법을 다루며, 각 방법이 어떻게 성능을 최적화하는지 구체적인 예시와 함께 설명하겠습니다. 1. useMemo: 불필요한 연산 방지useMemo는 값을 메모이제이션(memoization) 하여, 특정 값이 변경될 때만 재계산되도록 합니다. 주로 계산 비용이 높은 작업이나 렌더링 중 자주 호출되는 함수에 유용합니다.import { useRef, useState, useMemo } from "react";// A..

React에서 상태 관리를 더 효율적으로 할 수 있는 훅(Hook) 중 하나가 바로 useReducer입니다. 이 훅은 상태 관리가 복잡해질 때 useState의 대체품으로 유용하게 사용될 수 있습니다. useReducer는 주로 여러 상태 값이나 복잡한 상태 로직을 다룰 때 그 유용성을 발휘합니다.이번 글에서는 useState와 useReducer를 활용한 다양한 상태 관리 예제를 소개하고, 이를 통해 어떻게 상태를 더 깔끔하게 관리할 수 있는지 알아보겠습니다. useState와 useReducer 비교1. useState 사용법useState는 간단한 상태 값을 관리할 때 사용됩니다. 아래 예제는 카운터를 관리하는 간단한 React 컴포넌트입니다.import { useState } from "reac..