DOTI Project

React에서 컴포넌트의 성능을 최적화하거나, DOM을 직접 다뤄야 할 경우 고급 Hook들이 큰 도움이 됩니다. 이번 글에서는 useMemo, useCallback, useRef의 개념과 사용 예제를 알아봅니다.1. useMemo – 계산 결과를 메모이제이션useMemo는 값의 계산 결과를 기억해두고, 의존성이 바뀌지 않으면 기존 값을 재사용합니다. 무거운 계산 로직에서 주로 사용됩니다.const expensiveValue = useMemo(() => { return heavyComputation(count);}, [count]);렌더링 시 계산 비용이 높은 함수의 반복 실행을 막을 수 있음의존성 배열을 정확히 설정해야 함2. useCallback – 함수 메모이제이션useCallback은 함수 자체..

React는 기본적으로 단방향 데이터 흐름을 따릅니다. 하지만 여러 컴포넌트에서 동일한 데이터를 사용해야 할 경우 Context API를 사용하면 매우 유용합니다.1. Context API란?Context는 props를 거치지 않고도 하위 컴포넌트에 데이터를 전달할 수 있게 해주는 기능입니다. 예를 들어, 다국어 설정, 테마, 로그인 정보 등에 자주 사용됩니다.2. 기본 사용법// 1. Context 생성import { createContext } from 'react';export const ThemeContext = createContext('light');// 2. Provider로 감싸기import { ThemeContext } from './ThemeContext';function App() {..

React 앱이 커지면 컴포넌트 간 상태 공유가 복잡해집니다. 이때 외부 상태 관리 라이브러리를 사용하면 상태 흐름을 더 명확히 하고 유지보수가 쉬워집니다. 오늘은 대표적인 상태 관리 도구 Redux, Recoil, Zustand를 비교해보겠습니다.1. Redux – 전통적인 강자Redux는 가장 널리 사용되는 상태 관리 도구입니다. Flux 패턴을 기반으로 상태를 중앙 집중식으로 관리합니다.예측 가능한 상태 관리미들웨어를 통한 로깅, 비동기 처리 등 확장성 우수코드 양이 많고 학습 곡선이 있음// Redux 예시import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({ name: 'counter', initial..

작은 프로젝트에서는 폴더 구조에 크게 신경 쓰지 않아도 되지만, 규모가 커지면 체계적인 구조가 중요해집니다. 이 글에서는 React 프로젝트의 폴더 구조와 컴포넌트 관리 전략에 대해 알아봅니다.1. 기본 폴더 구조 예시가장 많이 쓰이는 폴더 구조는 다음과 같습니다:src/├── assets/ // 이미지, 폰트, 스타일 등 정적 파일├── components/ // 재사용 가능한 UI 컴포넌트├── pages/ // 각 라우트 페이지 컴포넌트├── hooks/ // 커스텀 훅 모음├── contexts/ // Context API 관련 코드├── services/ // API 호출 등 비즈니스 로직├── utils/ ..

React에서 API 요청을 통해 데이터를 불러와야 할 때 비동기 처리가 필요합니다. 가장 자주 사용되는 방법은 useEffect Hook과 fetch 또는 axios를 활용하는 것입니다.1. 기본 구조 – useEffect + fetchuseEffect는 컴포넌트가 마운트될 때 한 번 실행되도록 설정할 수 있습니다. 아래는 fetch를 이용해 데이터를 가져오는 예제입니다.import { useEffect, useState } from 'react';function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('https..

React는 상태 변화 시 컴포넌트를 다시 렌더링합니다. 하지만 모든 리렌더링이 필요한 것은 아닙니다. 이 글에서는 불필요한 렌더링을 줄여 성능을 높이는 3가지 도구 React.memo, useCallback, useMemo를 소개합니다.1. React.memo – 컴포넌트 리렌더링 방지React.memo는 props가 바뀌지 않았다면 컴포넌트 렌더링을 건너뜁니다.const Child = React.memo(function Child({ name }) { console.log("렌더링됨"); return 이름: {name};});사용 시점: 자주 렌더링되는 부모 컴포넌트 아래 정적인 자식 컴포넌트가 있을 때2. useCallback – 함수 재생성 방지useCallback은 함수를 메모이제이션해서 불..

React 애플리케이션이 커지면서 컴포넌트 간에 데이터를 전달하기 어려워지는 경우가 많습니다. 이때 Context API를 사용하면 전역 데이터를 간단하게 관리할 수 있습니다.1. props drilling 문제란?상위 컴포넌트의 데이터를 하위로 계속 전달해야 하는 상황을 props drilling이라고 합니다. 예: 이런 구조는 관리가 어렵고, 중간 컴포넌트는 실제로 데이터를 사용하지 않더라도 전달해야 합니다.2. Context API 기본 사용법1) Context 생성import { createContext } from 'react';export const UserContext = createContext(null);2) Provider로 감싸기import { UserC..

React로 폼을 만들 때 사용자 입력을 어떻게 다룰지에 따라 Controlled Component와 Uncontrolled Component로 나뉩니다. 각각의 개념과 사용 예제를 통해 언제 어떤 방식을 선택할지 알아보겠습니다.1. Controlled Component란?입력값을 useState로 직접 상태로 관리하는 방식입니다. 모든 변화는 React 상태를 통해 이루어집니다.import { useState } from 'react';function ControlledForm() { const [name, setName] = useState(''); const handleChange = (e) => { setName(e.target.value); }; const handleSubmit =..

SPA(Single Page Application)인 React에서는 페이지 전환을 위해 React Router를 사용합니다. 이 글에서는 React Router v6의 기본 사용법부터 동적 라우팅, 중첩 라우팅까지 핵심 기능을 정리합니다.1. 설치하기npm install react-router-dom2. 기본 라우팅 구성// App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pages/Home';import About from './pages/About';function App() { return ( } /> } /> );}3. ..

React로 프로젝트를 개발하다 보면 다음과 같은 복잡한 경로로 import하는 경우가 많습니다.import Button from '../../../components/common/Button';이런 상대 경로는 폴더 구조가 깊어질수록 관리가 어려워집니다. 이 문제를 해결하는 방법이 바로 절대 경로(Alias)입니다.1. 절대 경로 설정이란?절대 경로는 프로젝트 루트 기준으로 경로를 지정하는 방식입니다. 설정 후에는 아래처럼 깔끔하게 import할 수 있습니다.import Button from 'components/common/Button';2. jsconfig.json 설정 (JavaScript)JavaScript 프로젝트라면 루트 디렉토리에 jsconfig.json 파일을 생성하고 아래와 같이 작성합..