코딩 자율학습 리액트 프런트엔드 개발 입문(코딩 자율학습)

각 장은 핵심 개념 설명과 실습 예제를 결합해 입문자도 무리 없이 따라갈 수 있도록 구성되었습니다. 전통적인 CSS부터 Tailwind CSS까지 다양한 스타일링 방법을 비교하며, React.memo, useCallback, useTransition 같은 성능 최적화 기법과 리액트 19의 새로운 기능을 예제를 통해 자연스럽게 익힙니다. 또한 Fetch API, Axios, Node.js 기반 API 서버 구현까지 다뤄, 프런트엔드와 백엔드 연동 흐름을 이해할 수 있습니다.

학습 단계에 맞춰 계산기, 할 일 관리 애플리케이션, 나만의 블로그 만들기 프로젝트를 직접 구현하면서 이론과 실무를 연결합니다. 이를 통해 단순한 문법 학습을 넘어, 실제 서비스 개발에 필요한 문제 해결 능력을 키울 수 있습니다. 이 책은 리액트와 타입스크립트의 기반을 탄탄히 다지고 싶은 모든 독자에게 든든한 길잡이가 될 것입니다.

1장 리액트 시작하기
1.1 리액트 개요
1.1.1 리액트의 핵심 철학
1.1.2 리액트의 특징
1.1.3 리액트를 배워야 하는 이유
1.1.4 리액트의 발전
1.2 개발 환경 설정하기
1.2.1 Node.js 설치
1.2.2 VSCode 설치
1.2.3 VSCode 익스텐션 설치
1.2.4 웹 브라우저 설치
1.3 리액트 애플리케이션 만들기
1.3.1 Vite로 프로젝트 생성하기
1.3.2 불필요한 폴더와 파일 삭제 및 수정하기
1.3.3 기본 구조 살펴보기

2장 JSX 개요
2.1 JSX란
2.2 JSX의 문법적 특징
2.2.1 하나의 루트 요소로 반환하기
2.2.2 모든 태그 닫기
2.2.3 태그 속성은 카멜 케이스로 작성하기
2.2.4 표현식은 중괄호 안에서 사용하기
2.2.5 인라인 스타일은 객체로 지정하기
2.2.6 중괄호 안에 주석 작성하기

3장 컴포넌트
3.1 컴포넌트란
3.2 컴포넌트의 종류
3.2.1 클래스 컴포넌트
3.2.2 함수형 컴포넌트
3.2.3 클래스 컴포넌트와 함수형 컴포넌트 사용
3.3 컴포넌트 기초
3.3.1 컴포넌트 확장자
3.3.2 컴포넌트 정의
3.3.3 컴포넌트 추가
3.3.4 컴포넌트 트리
3.4 컴포넌트와 props 객체
3.4.1 props 객체란
3.4.2 props 객체 타입 알아내기
3.4.3 props 객체의 구조 분해 할당과 타입 정의
3.4.4 props와 전개 연산자
3.4.5 children
3.5 컴포넌트와 이벤트
3.5.1 이벤트 속성
3.5.2 이벤트 핸들러
3.5.3 이벤트 객체
3.5.4 이벤트 전파

4장 컴포넌트 상태
4.1 컴포넌트의 상태란
4.2 useState 훅: 기본 상태 관리
4.2.1 useState 훅의 기본 문법
4.2.2 useState 훅 사용하기
4.2.3 useState 훅 여러 번 사용하기
4.2.4 useState 훅 사용 시 주의사항
4.3 useReducer 훅: 복잡한 상태 관리
4.3.1 useReducer 훅 기본 문법
4.3.2 useReducer 훅 사용하기
4.3.3 useReducer 훅 여러 번 사용하기
4.4 상태 관리 패턴
4.4.1 상태 전달하기
4.4.2 상태 끌어올리기
4.5 개발자 도구로 상태 값 확인하기

5장 컴포넌트 스타일링
5.1 전통적인 방법으로 스타일링하기
5.1.1 인라인 스타일
5.1.2 글로벌 스타일
5.1.3 CSS 모듈
5.1.4 classnames 라이브러리
5.2 CSS-in-JS로 스타일링하기
5.2.1 styled-components
5.2.2 emotion
5.2.3 vanilla-extract
5.3 Tailwind CSS로 스타일링하기
5.3.1 설치 및 기본 사용법
5.3.2 tailwlind-merge 라이브러리
5.4 이미지 렌더링하기
5.4.1 이미지 리소스 준비하기
5.4.2 public 폴더에서 이미지 렌더링하기
5.4.3 src 폴더에서 이미지 렌더링하기
5.5 폰트 적용하기
5.5.1 구글 폰트 적용하기
5.5.2 @font-face로 웹 폰트 적용하기

6장 실습: 계산기 만들기
6.1 실습 내용 소개
6.2 리액트 애플리케이션의 기본 구조 설정하기
6.2.1 프로젝트 생성하기
6.2.2 불필요한 폴더와 파일 정리하기
6.3 UI 구성하기
6.3.1 HTML 작성하기
6.3.2 CSS 작성하기
6.4 데이터 바인딩하고 이벤트 연결하기
6.4.1 데이터와 이벤트 핸들러 정의하기
6.4.2 이벤트 핸들러 정의하고 연결하기
6.5 로직 구현하기
6.5.1 숫자 입력 로직 구현하기
6.5.2 연산 로직 구현하기
6.5.3 초기화 로직 구현하기
6.5.4 소수점 로직 구현하기
6.5.5 예외 처리하기

7장 조건부 렌더링과 반복 렌더링
7.1 조건부 렌더링
7.1.1 if 문을 사용한 조건부 렌더링
7.1.2 삼항 연산자를 사용한 조건부 렌더링
7.1.3 AND 연산자를 사용한 조건부 렌더링
7.2 반복 렌더링
7.2.1 반복 렌더링의 기본 개념 이해하기
7.2.2 map() 메서드 사용하기
7.2.3 그 밖의 사용법

8장 폼 다루기
8.1 폼 정의하기
8.2 폼 제어하기
8.2.1 제어 컴포넌트
8.2.2 비제어 컴포넌트
8.3 폼 제어 한 단계 더 나아가기
8.3.1 useRef 훅 활용하기
8.3.2 커스텀 훅 사용하기
8.3.3 커스텀 훅 심화
8.4 폼 밸리데이션
8.4.1 기본 밸리데이션 사용하기
8.4.2 커스텀 밸리데이션 로직 추가하기
8.4.3 라이브러리 사용하기
8.5 리액트 19에서 ref 변경 사항
8.5.1 ref 객체의 컴포넌트 전달 방식
8.5.2 클린업 함수

9장 실습: 할 일 관리 애플리케이션 만들기
9.1 실습 내용 소개
9.2 UI 구성하기
9.2.1 기본 구조 설정하기
9.2.2 HTML 작성하기
9.2.3 CSS 작성하기
9.3 컴포넌트 분리하기
9.3.1 복잡한 〈svg〉 요소 컴포넌트로 분리하기
9.3.2 버튼 요소 컴포넌트로 분리하기
9.3.3 텍스트 입력 요소 컴포넌트로 분리하기
9.3.4 체크박스 요소 컴포넌트로 분리하기
9.3.5 레이아웃 요소 컴포넌트로 분리하기
9.4 기능 구현하기
9.4.1 할 일 목록 입력받기
9.4.2 할 일 목록 출력하기
9.4.3 할 일 완료 처리하기
9.4.4 할 일 삭제하기
9.4.5 할 일 수정하기

10장 고유 아이디와 사이드 이펙트
10.1 useId 훅
10.2 useEffect 훅
10.2.1 컴포넌트의 생명주기
10.2.2 useEffect 훅 사례
10.3 할 일 관리 애플리케이션 개선하기
10.3.1 폼 요소 연결하기
10.3.2 할 일 저장하기

11장 컴포넌트 최적화
11.1 컴포넌트 최적화 개요
11.1.1 성능 최적화 방법
11.1.2 불필요한 리렌더링
11.1.3 메모이제이션
11.2 컴포넌트 메모이제이션
11.2.1 React.memo 사용하기
11.2.2 React.memo 사용 시 주의사항
11.3 함수 메모이제이션
11.3.1 함수를 props로 전달하는 경우
11.3.2 useCallback 훅 사용하기
11.3.3 useCallback 훅 사용 시 주의사항
11.4 값 메모이제이션
11.4.1 연산 비용이 큰 작업의 성능 저하 문제
11.4.2 useMemo 훅 사용하기
11.4.3 useMemo 훅 사용 시 주의사항
11.5 로딩 성능 최적화
11.5.1 React.lazy()를 사용한 코드 스플리팅
11.5.2 Suspense
11.5.3 ErrorBoundary
11.6 상태 업데이트 최적화
11.6.1 useDeferredValue 훅(리액트 19 이후)
11.6.2 useTransition 훅
11.7 리소스 로딩 최적화(리액트 19 이후)
11.8 할 일 관리 애플리케이션 개선하기
11.8.1 불필요한 리렌더링 코드 찾기
11.8.2 불필요한 리렌더링 최적화하기

12장 전역 상태 관리
12.1 상태 관리 이해하기
12.1.1 로컬 상태 관리
12.1.2 전역 상태 관리
12.2 Context API로 전역 상태 관리하기
12.2.1 컨텍스트 객체 생성하기
12.2.2 Provider로 컨텍스트 범위 지정하기
12.2.3 useContext 커스텀 훅 만들기
12.2.4 컨텍스트로 공유되는 전역 상태 사용하기
12.2.5 렌더링 최적화하기
12.2.6 컨텍스트 중첩 사용하기
12.2.7 Context API 사용 시 주의사항
12.2.8 use 훅으로 Context API 사용하기(리액트 19 이후)
12.3 Redux로 전역 상태 관리하기
12.3.1 Redux와 Redux Toolkit 설치하기
12.3.2 Redux 스토어 생성하기
12.3.3 Redux 스토어 리액트에 제공하기
12.3.4 Redux 상태 슬라이스 만들기
12.3.5 슬라이스를 스토어에 추가하기
12.3.6 스토어 사용하기
12.3.7 값을 전달해 상태 변경하기
12.3.8 개발자 도구 활용하기
12.4 Zustand로 전역 상태 관리하기
12.4.1 Zustand 설치하기
12.4.2 Zustand 스토어 생성하기
12.4.3 Zustand 스토어 사용하기
12.4.4 Zustand의 고급 기능
12.5 할 일 관리 애플리케이션에 전역 상태 관리 적용하기
12.5.1 Zustand 설치하기
12.5.2 스토어 생성하기
12.5.3 스토어 사용하기

13장 리액트 라우터로 라우팅 기능 사용하기
13.1 라우팅 방식 이해하기
13.1.1 SPA와 CSR
13.1.2 MPA와 SSR
13.1.3 리액트와 리액트 라우터
13.2 리액트 라우터 다루기
13.2.1 리액트 라우터 설치하기
13.2.2 라우팅 컴포넌트 만들기
13.2.3 라우팅 범위 지정하기
13.2.4 라우트 설정하기
13.3 리액트 라우터 기능 사용하기
13.3.1 중첩 라우트
13.3.2 레이아웃 라우트
13.3.3 라우트 프리픽스
13.3.4 동적 세그먼트
13.3.5 옵셔널 세그먼트
13.3.6 스플랫
13.3.7 문서 메타데이터 설정하기(리액트 19 이후)
13.4 내비게이션 기능 사용하기
13.4.1 링크를 통한 이동
13.4.2 프로그래밍 방식 라우팅

14장 비동기 데이터 통신과 처리 기법
14.1 데이터 통신의 기초 개념
14.1.1 HTTP와 메서드
14.1.2 API
14.2 Node.js로 API 서버 만들기
14.2.1 API 서버 실행하기
14.2.2 API 서버 코드 확인하기
14.3 Fetch API로 데이터 통신하기
14.3.1 기본 문법
14.3.2 HTTP 메서드 사용법
14.3.3 리액트에서 사용하기
14.4 Axios로 데이터 통신하기
14.4.1 Axios 라이브러리 설치 및 기본 문법
14.4.2 HTTP 메서드 사용법
14.4.3 리액트에서 사용하기
14.5 데이터 통신 파고들기
14.5.1 초기 데이터 설정하기
14.5.2 응답 데이터 안전하게 처리하기
14.5.3 오류 상태 정의하고 오류 처리하기
14.5.4 로딩 상태 정의하고 처리하기
14.5.5 데이터 요청 취소하기
14.5.6 커스텀 훅 사용: Fetch API 방식
14.5.7 커스텀 훅 사용: Axios 방식
14.6 비동기 데이터 처리 심화
14.6.1 기본 예제 작성
14.6.2 useTransition 훅으로 비동기 데이터 처리하기
14.6.3 useActionState 훅으로 비동기 데이터 처리하기
14.6.4 useFormStatus 훅으로 비동기 데이터 처리하기
14.6.5 useOptimistic 훅으로 비동기 데이터 처리하기
14.6.6 use 훅 사용하기(리액트 19 이후)
14.6.7 use 훅 더 잘 사용하기(리액트 19 이후)

15장 프로젝트: 나만의 블로그 만들기
15.1 블로그 애플리케이션 개요
15.1.1 애플리케이션 UI
15.1.2 프로젝트 폴더 구조
15.2 UI 구성하기
15.2.1 스캐폴딩하기
15.2.2 라우팅하기
15.2.3 HTML 작성하기
15.2.4 CSS 작성하기
15.2.5 컴포넌트 분리하기
15.3 인증 기능 구현하기
15.3.1 백엔드 API 서버 실행하기
15.3.2 인증 기능 이해하기
15.3.3 인증 기능 구현하기
15.3.4 헤더 영역 분기 처리하기
15.3.5 새로 고침 후에도 인증 유지하기
15.3.6 페이지별 접근 제어 설정하기
15.3.7 액세스 토큰 값 요청에 포함시키기
15.4 CRUD 기능 구현하기
15.4.1 글쓰기 기능 구현하기
15.4.2 게시글 목록 표시 기능 구현하기
15.4.3 게시글 상세 페이지 구현하기
15.4.4 연관 게시글 기능 구현하기
15.4.5 검색 기능 구현하기
15.4.6 추가 기능: 토큰 만료 처리하기
15.4.7 추가 기능: 오류 처리하기
15.5 배포하기
15.5.1 빌드하기
15.5.2 Netlify로 배포하기

김기수 비전공자 출신으로 안드로이드/iOS 개발로 커리어를 시작해 10년이 넘는 시간 동안 프런트엔드, 백엔드 분야의 다양한 언어를 접하고 활용하며 여전히 개발자의 길을 걷고 있습니다. 현재는 코딩 유튜브 채널인 '수코딩'을 운영하며 많은 사람이 코딩을 쉽게 배울 수 있도록 끊임없이 연구하며 노력하고 있습니다.

ㆍ 유튜브 채널: https://www.youtube.com/@sucoding
ㆍ 수코딩 사이트: https://www.sucoding.kr