React

학습 목표: 컴포넌트·props·state·Effect로 사용자 입력에 반응하는 화면을 구성합니다. 선수 지식: HTML, JavaScript 배열·함수·모듈을 익히고 TypeScript 기본 타입을 확인합니다. 초급·중급·고급의 목표를 확인하고 현재 공개된 글부터 학습하세요. 빈 단계는 계획을 유지하며 내용을 차례로 보강합니다.

단계별 학습 목표

각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.

초급 목표

컴포넌트와 상태의 기본 동작을 익혀, 입력과 이벤트에 반응하는 작은 화면을 만들고 데이터 흐름을 이해하는 방법을 다룹니다.

학습 주제

  • 컴포넌트와 props
  • 상태와 이벤트
  • 목록과 조건부 표시

중급 목표

상태의 소유 위치와 비동기 데이터 흐름을 정리하여, 폼과 화면 로직을 결합하고 사용자 동작을 검증하는 방법을 다룹니다.

학습 주제

  • 상태 위치와 공유
  • 커스텀 훅과 부수 효과
  • 폼과 상호작용 테스트

고급 목표

렌더링 비용과 변경 범위를 실제 근거로 분석하여, 복잡한 화면의 상태 경계와 컴포넌트 구조를 설계하는 방법을 다룹니다.

학습 주제

  • 렌더링 성능 측정
  • 복합 상태 흐름 설계
  • 컴포넌트 API 설계

React 학습 목록

읽음 — / 전체 33개 · 필수 27개

학습 시작

단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.

초급 10개

  1. 안내 · 필수 길잡이

    React 학습 순서 컴포넌트 props state부터 상태관리까지

  2. 학습 1 / 24 · 필수 학습

    React Vite 사용법 Vite 8 프로젝트 생성 실행 빌드

  3. 학습 2 / 24 · 필수 학습

    React 컴포넌트 개념 정리 UI 재사용 구조 잡기

  4. 학습 3 / 24 · 필수 학습

    React JSX 문법 사용법 조건부 렌더링과 리스트 처리

  5. 학습 4 / 24 · 필수 학습

    React props 사용법 부모에서 자식으로 데이터 전달하는 구조

  6. 학습 5 / 24 · 필수 학습

    React children 사용법 컴포넌트 합성과 재사용 UI 설계

  7. 학습 6 / 24 · 필수 학습

    React useState 사용법 state와 객체 배열 업데이트 기준

  8. 학습 7 / 24 · 필수 학습

    React state 보존 초기화 key로 컴포넌트 상태 리셋하기

  9. 학습 8 / 24 · 필수 학습

    React 제어 컴포넌트 폼과 상태 끌어올리기 첫 실습 가이드

  10. 학습 9 / 24 · 필수 학습

    React useRef 실습 입력 포커스와 state 역할 나누기

중급 12개

  1. 학습 10 / 24 · 필수 학습

    React useEffect 사용법 외부 시스템과 상태 동기화하기

  2. 학습 11 / 24 · 필수 학습

    React Effect 생명주기와 useEffectEvent 사용 기준

  3. 학습 12 / 24 · 필수 학습

    React useReducer와 Context 실습 작업 목록 상태 여러 컴포넌트 공유

  4. 학습 13 / 24 · 필수 학습

    React 커스텀 훅 설계 상태 로직 컴포넌트 분리 기준

  5. 학습 14 / 24 · 필수 학습

    React 컴포넌트 props 타입 지정 부모 자식 값 구조

  6. 학습 15 / 24 · 필수 학습

    React Hook Form 설치 사용법 첫 폼 만들기

  7. 학습 16 / 24 · 필수 학습

    React TypeScript 검색 필터 만들기 상태 결과 목록 연결

  8. 학습 17 / 24 · 필수 학습

    React lazy Suspense 코드 스플리팅 지연 로딩

  9. 학습 18 / 24 · 필수 학습

    React useActionState useOptimistic 비동기 액션 낙관적 UI

  10. 학습 19 / 24 · 필수 학습

    React Router v7 실습 BrowserRouter Layout Outlet 상세 경로

  11. 안내 · 필수 길잡이

    React 라이브러리 조합 가이드 Zustand TanStack Query shadcn ui 선택 기준

  12. 학습 20 / 24 · 필수 학습

    React useTransition useDeferredValue 검색 UI 최적화

고급 4개

  1. 학습 21 / 24 · 필수 학습

    shadcn ui 시작 실습 Vite 설정 components json 입력 폼 Sonner

  2. 학습 22 / 24 · 필수 학습

    shadcn ui 복합 컴포넌트 실습 Dialog Popover Carousel 접근성

  3. 학습 23 / 24 · 필수 학습

    React DevTools Profiler 사용법 리렌더링 측정 원인 찾기

  4. 학습 24 / 24 · 필수 학습

    React Compiler 기준 useMemo useCallback 언제 줄일까

개념·참고 7개

  1. 참고 1 / 7 · 선택 참고

    React state 업데이트 안됨 문제 해결

  2. 참고 2 / 7 · 선택 참고

    React 리스트 key 경고 해결 기준 index key를 피해야 하는 이유

  3. 참고 3 / 7 · 필수 선수

    React useEffect 두 번 실행되는 이유 StrictMode API 중복 해결

  4. 참고 4 / 7 · 선택 참고

    React Maximum update depth exceeded 오류 해결 무한 렌더링 원인 찾기

  5. 참고 5 / 7 · 선택 참고

    React Cannot update 오류 해결 렌더링 중 setState 원인

  6. 참고 6 / 7 · 선택 참고

    React Hook Form 에러 메시지 표시 문제 해결 validation 체크리스트

  7. 참고 7 / 7 · 선택 참고

    React로 TaskFlow 만들기: 32편 동안 완성하는 작업 관리 앱
읽음 기록 설정

읽음 기록은 이 브라우저에만 저장됩니다.

전체 기술 학습 가이드