DOTI Project

React로 SPA(Single Page Application)를 만들 때, 여러 페이지처럼 동작하게 하려면 라우팅(Routing) 기능이 필요합니다. React Router는 가장 널리 쓰이는 라우팅 라이브러리로, 동적 URL 관리, 중첩 라우팅, 리디렉션 등 다양한 기능을 제공합니다.1. React Router 설치npm install react-router-dom버전 6 기준으로 예제를 설명합니다.2. 기본 라우팅 설정// App.tsximport { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pages/Home';import About from './pages/About';function App() { r..

React 앱을 개발하다 보면 여러 컴포넌트가 같은 상태를 필요로 하는 경우가 있습니다. 이럴 때마다 props로 전달하는 건 번거롭고 복잡해지죠. Context API는 이런 문제를 해결하기 위해 전역 상태를 공유할 수 있는 방법을 제공합니다.1. Context API란?Context API는 컴포넌트 트리 전체에 데이터를 전달할 수 있는 기능을 제공합니다. Provider와 Consumer 개념을 통해 상태를 공유할 수 있습니다.2. Context 생성 및 Provider 정의// ThemeContext.tsximport { createContext, useContext, useState } from 'react';type Theme = 'light' | 'dark';const ThemeContext..

React 앱의 렌더링 성능을 높이기 위해서는 불필요한 연산과 렌더링을 줄이는 것이 핵심입니다. 이를 위해 React는 memo, useMemo, useCallback 같은 성능 최적화 도구를 제공합니다. 이번 글에서는 이 세 가지 개념을 실제 코드와 함께 쉽게 정리해보겠습니다.1. React.memo – 컴포넌트 메모이제이션React.memo는 props가 변경되지 않으면 컴포넌트의 리렌더링을 방지합니다.const Child = React.memo(function Child({ value }) { console.log('Child 렌더링'); return 값: {value};});부모 컴포넌트에서 state가 바뀌더라도 value props가 같다면 자식 컴포넌트는 렌더링되지 않습니다.2. useM..

React에서 useState, useEffect 같은 기본 훅을 사용하다 보면, 반복되는 로직이 생기기 마련입니다. 이럴 때 커스텀 훅을 만들어 사용하면 코드의 재사용성과 구조화가 쉬워집니다.1. 커스텀 훅이란?커스텀 훅(Custom Hook)은 React의 기본 훅들을 조합해 만든 나만의 훅입니다. 보통 useSomething 형태로 네이밍하며, 공통 로직을 추출해 재사용할 수 있도록 돕습니다.2. 간단한 커스텀 훅 예제 – useToggle// useToggle.tsimport { useState, useCallback } from 'react';export function useToggle(initialValue: boolean = false): [boolean, () => void] { con..

React는 유연한 만큼 실수하기 쉬운 구조를 가지고 있습니다. TypeScript를 도입하면 코드에 타입 안정성이 생겨 실수를 줄이고 생산성을 높일 수 있습니다. 이번 글에서는 React에서 TypeScript를 어떻게 활용할 수 있는지 알아봅니다.1. TypeScript 기반 React 프로젝트 생성npx create-react-app my-app --template typescript또는 기존 프로젝트에 TypeScript를 추가하려면 다음 명령어를 실행합니다:npm install --save typescript @types/react @types/react-dom2. 기본적인 컴포넌트 타입 정의함수형 컴포넌트에 props 타입을 지정하는 기본적인 방법입니다.type GreetingProps = {..

React 앱이 커질수록 버그 없이 안정적으로 작동하도록 보장하려면 테스트 코드가 필요합니다. 이번 글에서는 Jest와 React Testing Library를 이용해 컴포넌트 테스트를 작성하는 방법을 알아봅니다.1. Jest와 React Testing Library란?Jest: Facebook에서 만든 JavaScript 테스트 프레임워크로, React에 최적화되어 있습니다.React Testing Library: 사용자의 관점에서 React 컴포넌트를 테스트할 수 있도록 도와주는 도구입니다.2. 설치하기npm install --save-dev @testing-library/react @testing-library/jest-dom3. 기본 테스트 구조 이해하기React Testing Library의 기..

React 앱을 전 세계 사용자에게 서비스하고 싶다면 다국어 지원은 필수입니다. 이번 글에서는 가장 널리 쓰이는 i18n 도구인 react-i18next를 사용해 다국어를 구현하는 방법을 정리해봅니다.1. i18n이란?i18n(Internationalization)은 앱에서 여러 언어를 지원하기 위한 기술과 방식을 말합니다. React에서는 react-i18next라는 라이브러리를 통해 손쉽게 구현할 수 있습니다.2. 설치 및 기본 설정npm install react-i18next i18next기본 설정 파일을 생성합니다: i18n.jsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';const resources = {..

React 앱이 커지면 렌더링 비용이 늘어나면서 성능이 저하될 수 있습니다. 이번 글에서는 불필요한 렌더링을 줄이고, 컴포넌트 로딩을 지연시켜 성능을 개선하는 방법들을 정리해보겠습니다.1. React.memo로 불필요한 렌더링 막기React.memo는 컴포넌트의 props가 바뀌지 않는 한 렌더링을 건너뜁니다.const MyComponent = React.memo(function MyComponent({ value }) { console.log('렌더링'); return {value};});순수 함수 컴포넌트에 사용props가 같다면 다시 렌더링되지 않음2. useMemo로 계산 결과 캐싱하기복잡한 연산 결과를 캐싱하여 렌더링 성능을 높일 수 있습니다.const sortedList = useMemo(..

React에서 폼을 다룰 때 가장 먼저 알아야 할 개념이 바로 Controlled와 Uncontrolled 컴포넌트입니다. 이 글에서는 두 방식의 차이와 실제 사용 예제를 통해 언제 어떤 방식을 선택하면 좋은지 설명합니다.1. Controlled Components란?Controlled 컴포넌트는 입력값이 컴포넌트의 상태(state)에 의해 제어되는 방식입니다. 입력 값이 상태에 저장되고, 상태에 따라 화면에 표시됩니다.function ControlledForm() { const [name, setName] = useState(''); const handleChange = (e) => { setName(e.target.value); }; return ( );}입력값을 실시간으로 검증..

React 애플리케이션은 종종 외부 API로부터 데이터를 가져오거나 전송해야 합니다. 이때 필요한 것이 바로 비동기 처리입니다. 이번 글에서는 fetch와 axios, 그리고 async/await 문법을 활용한 비동기 처리 방법을 살펴보겠습니다.1. fetch API 기본 사용법fetch는 자바스크립트에서 제공하는 기본 HTTP 클라이언트입니다.useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => setPosts(data)) .catch(error => console.error(error));}, []);단점: 에러 처리와 JSO..