React

리액트 API 연동: Axios 한 번에 정리(로딩·에러·취소) Axios는 인스턴스·인터셉터로 공통 헤더·에러 포맷·타임아웃을 표준화하기에 적합합니다. 예제로 실무 기본 흐름(로딩/에러/요청 취소)을 알아봅니다. fetch vs Axios: 무엇을 쓸까? 가이드: 의존성 최소·간단한 연동이면 fetch, 범용 공통 헤더·토큰·리트라이·에러 표준화가 필요하면 Axios 권장. 1) axios 인스턴스 + 인터셉터 1. 패키지 설치 2. HTTP 인스턴스 파일 2) 예제: UsersAxiosBasic (로딩/에러/취소) ▼ 실행 […]

리액트 Context API 전역 상태 관리: 드릴링 끝내는 실전 패턴 리액트 Context API는 트리 어디서든 값을 꺼내 쓰게 해주는 전역 전달 메커니즘입니다. createContext → Provider → useContext 흐름만 알면, 테마·언어·인증 같은 공통 값을 props 드릴링 없이 공유할 수 있습니다. 이 글에서는 최소 예제와 테마 토글 데모를 통해 기본 사용법과 실무 팁(리렌더 최소화, 안전한 커스텀 훅)을

리액트 인라인 스타일 vs 외부 스타일: 언제 무엇을 써야 할까? 리액트에서 스타일을 적용하는 방법은 크게 두 가지입니다. 인라인 스타일(style prop)과 외부 스타일(클래스 기반)입니다. 두 방식은 적용 범위·표현력·성능 특성이 꽤 다릅니다. 이 글은 “언제 무엇을 써야 하는지” 선택 기준과 함께, 실습 가능한 짧은 예제를 제공합니다. 요약 선택 기준 인라인 스타일: 장단점과 예제 장점 단점 예제 1)

리액트 스타일링 비교: CSS 모듈 vs styled-components CSS 모듈과 styled-components는 리액트에서 가장 많이 쓰이는 두 가지 스타일링 방식입니다. 이 글에서는 설치부터 기본 사용법, 유지보수/성능/테마링까지 비교하고, 동일 UI를 두 방식으로 구현하는 실습 예제를 제공합니다. 1) 개념 한눈에 보기 항목 CSS 모듈 styled-components 핵심 아이디어 파일 단위 클래스 이름 해싱으로 자동 스코프 JS 안에서 styled.* 함수로 컴포넌트화

리액트 라우터 DOM 설치 및 기본 사용법(React Router v6) 싱글 페이지 애플리케이션(SPA)에서 화면 전환과 URL 관리를 담당하는 표준 라이브러리가 react-router-dom입니다. 이 글에서는 설치 → 기본 셋업 → 페이지 이동 → 파라미터/검색쿼리 → 중첩 라우팅 → 404 처리 순서로 핵심만 알아봅니다. (GitHub Pages 배포 시 HashRouter 권장 안내 포함) 1) 설치 설치 확인: 2) 라우터 선택:

리액트 커스텀 훅 만들기: useLocalStorage·useFetch 핵심 2가지 커스텀 훅(Custom Hook)은 컴포넌트 간에 상태 로직을 재사용하는 가장 깔끔한 방법입니다. 이 글에서는 실무에서 특히 많이 쓰는 두 가지 패턴만 선별해 빠르게 알아봅니다. 언제 커스텀 훅을 만들까? 예제 1) useLocalStorage — 상태를 브라우저 저장소와 동기화 상태를 localStorage에 저장해 새로고침/다른 탭에서도 유지합니다. storage 이벤트로 탭 간 동기화도 처리합니다. 코드:

리액트 useCallback 제대로 쓰기: 참조 안정화로 자식 리렌더 줄이기 useCallback은 함수의 참조를 의존성 배열이 바뀔 때만 새로 만들어 전달하는 훅입니다. “계산 결과”를 캐시하는 useMemo와 달리, 콜백 함수의 레퍼런스를 안정화해 자식의 React.memo와 조합할 때 리렌더를 줄이는 데에 쓰입니다. 1) 언제 useCallback을 쓸까? 2) 쓰지 말아야 할 때 예제 1 — React.memo + useCallback으로 자식 리렌더 억제

리액트 useMemo 제대로 쓰기: 언제 이득이고 언제 오버엔지니어링일까 useMemo는 비싼 계산 결과나 파생 데이터를 의존성 배열(deps)이 변할 때만 다시 계산하도록 메모화하는 훅입니다. 모든 계산에 붙이면 성능이 좋아지는 게 아니라, 연산 비용이 높거나 참조 동일성 유지가 중요한 구간에서만 이득입니다. 이 글에서는 선택 기준과 실전 예제 2개로 핵심을 정리합니다. 1) 언제 useMemo를 쓸까? 2) 쓰지 말아야 할

리액트 useReducer vs useState: 언제 쓰고 어떻게 마이그레이션할까 useState는 가장 단순한 상태 관리 훅이고, useReducer는 여러 상태가 서로 연관되어 한꺼번에 업데이트되거나, 업데이트 로직이 분기·규칙으로 복잡할 때 유리합니다. 이 글에서는 선택 기준과 마이그레이션 방법을 간단한 예제로 알아봅니다. 1) 언제 useState, 언제 useReducer? 2) 마이그레이션 기본 원칙 예제 1 — 카운터(단순 useState → 규칙 많은 useReducer) 처음엔

리액트 컴포넌트 반복: map과 key로 리스트 렌더링 최적화 반복 렌더링은 리액트에서 가장 자주 쓰이는 패턴입니다. Array.prototype.map으로 데이터를 컴포넌트로 변환하고, 변경 최소화를 위해 각 항목에 안정적인 key를 부여합니다. 이 글에서는 map 기본 패턴부터 key 선택 규칙, 인덱스 key 안티패턴 재현, 성능 팁까지 한 번에 알아봅니다. 1) 핵심 요약 2) map 기본 패턴 가장 단순한 리스트 렌더링