#리액트

85 편의 글

모던 리액트 + Next.js #5 Suspense와 use()로 로딩 처리
9 분 소요

모던 리액트 + Next.js #5 Suspense와 use()로 로딩 처리

준비된 부분부터 점진적으로 보여주는 streaming, Suspense 경계, loading.js, 그리고 새로 등장한 use() 훅을 다룹니다.

모던 리액트 + Next.js #4 데이터 페칭과 캐싱
8 분 소요

모던 리액트 + Next.js #4 데이터 페칭과 캐싱

Server Component에서 async/await로 데이터를 직접 가져오는 패턴, 그리고 Next.js의 캐싱 동작과 재검증을 살펴봅니다.

모던 리액트 + Next.js #3 Server Components vs Client Components
8 분 소요

모던 리액트 + Next.js #3 Server Components vs Client Components

두 종류의 컴포넌트가 어떻게 다르고, 'use client' 디렉티브로 어떻게 경계를 긋는지, 그리고 둘을 어떻게 섞어 쓰는지를 정리합니다.

모던 리액트 + Next.js #2 Next.js 시작과 App Router
8 분 소요

모던 리액트 + Next.js #2 Next.js 시작과 App Router

Next.js 프로젝트를 만들고 App Router의 파일 기반 라우팅, layout 시스템, 중첩 레이아웃을 손에 익혀봅니다.

모던 리액트 + Next.js #1 왜 Next.js와 Server Components인가
7 분 소요

모던 리액트 + Next.js #1 왜 Next.js와 Server Components인가

클라이언트 사이드 리액트의 한계와 Server Components가 풀어내는 문제, CSR/SSR/RSC의 차이를 정리합니다.

리액트로 Todo 앱 만들기 #5 영속화와 마무리
7 분 소요

리액트로 Todo 앱 만들기 #5 영속화와 마무리

localStorage로 데이터를 영속화하고 새로고침해도 유지되도록 마무리합니다. 시리즈 전체를 회고하며 다음 단계도 안내합니다.

리액트로 Todo 앱 만들기 #4 편집 기능
8 분 소요

리액트로 Todo 앱 만들기 #4 편집 기능

항목을 더블클릭하면 인라인 편집 모드로 진입하고, Enter로 저장 / Escape로 취소하는 편집 기능을 만들면서 useRef도 처음으로 사용해봅니다.

리액트로 Todo 앱 만들기 #3 필터링
6 분 소요

리액트로 Todo 앱 만들기 #3 필터링

전체 / 미완료 / 완료 필터를 추가하고, 완료 항목 일괄 삭제 같은 일괄 처리 기능까지 만들어봅니다.

리액트로 Todo 앱 만들기 #2 완료 토글과 통계
5 분 소요

리액트로 Todo 앱 만들기 #2 완료 토글과 통계

각 항목에 체크박스를 달아 완료를 토글하고, 시각적으로 구분하고, 남은/전체 개수를 보여주는 통계를 추가합니다.

리액트로 Todo 앱 만들기 #1 시작과 추가/삭제
6 분 소요

리액트로 Todo 앱 만들기 #1 시작과 추가/삭제

기초 강좌에서 배운 리액트로 진짜 Todo 앱을 만들어봅니다. 첫 글은 요구사항 정의, 컴포넌트 설계, 그리고 추가/삭제 기능까지 만들어봅니다.

리액트 기초 강좌 #15 라우팅 개요 (React Router)
9 분 소요

리액트 기초 강좌 #15 라우팅 개요 (React Router)

SPA의 라우팅 개념과 React Router의 기본 사용법, 동적 경로/네비게이션/중첩 라우트까지 한 번에 살펴봅니다.

리액트 기초 강좌 #14 성능 최적화 (memo / useMemo / useCallback)
9 분 소요

리액트 기초 강좌 #14 성능 최적화 (memo / useMemo / useCallback)

React.memo, useMemo, useCallback을 사용한 성능 최적화 방법과, 이 도구들을 언제 써야 하고 언제 쓰지 말아야 하는지를 정리합니다.