도서 소개

최신 리액트 19와 타입스크립트를 기반으로, 기초 개념부터 실무 패턴까지 한 번에 익힐 수 있도록 구성한 리액트 입문서이다. JSX, 컴포넌트 구조, props와 state, 이벤트 처리 등 기본기를 탄탄히 다지고, 상태 관리, 스타일링, 라우팅, 폼 처리, 비동기 데이터 통신 등 실무 필수 기술을 체계적으로 학습할 수 있다. 변화가 빠른 프런트엔드 생태계에서도 자신 있게 적응할 수 있는 실력을 길러준다.

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

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

  출판사 리뷰

[추천평]

방대한 분량에 놀랐다면, 상세한 설명에 더욱 감탄할 것입니다. 짧은 코드만 보여주는 것이 아니라, 리액트의 원리와 기능을 초보자도 쉽게 이해할 수 있도록 설명합니다. 저자의 노하우가 담긴 팁과 조언은 독자가 입문 단계를 넘어 실력을 발전시키는 데 큰 도움을 줍니다. 이 책은 리액트의 기초를 넘어 그 이상을 확실히 다질 수 있는 훌륭한 길잡이가 되어줄 것입니다. _김동우

용어를 쉽게 풀어 설명해 입문자도 이해하기 쉬웠고, 장마다 학습한 개념을 다시 상기하도록 중간에 1분 퀴즈를 통해 학습한 내용을 확인하는 부분이 매우 유용했습니다. 컴포넌트 상태 관련 장에서는 다양한 예제 코드를 제공해 개념을 확실히 숙지하는 데 많은 도움이 되었습니다. _김준성

복잡한 개념을 쉽게 풀어 설명해주는 점이 인상 깊었습니다. 장마다 예제와 실습 코드가 제공되어 직접 따라 하며 이해도를 높일 수 있었고, 실제 프로젝트에 적용 가능한 간단한 프로그램도 만들어볼 수 있어 실전 감각을 익히는 데 도움이 되었습니다. 특히 훅이나 리액트 라우터 등 최신 문법도 반영되어 실무에 바로 적용 가능한 지식도 습득할 수 있었습니다. 리액트를 처음 접하는 분께 자신 있게 추천합니다. _박광하

자율학습에 최적화한 구성으로, 처음부터 차근차근 따라 하니 마치 1:1로 강의를 듣는 듯한 친절함을 느낄 수 있었습니다. 짧지만 실용적인 예제를 풍부하게 제공해 내용을 이해하는 데 많은 도움이 되었습니다. 각 단원 끝에 있는 문제들로 복습할 수 있어 학습 효과가 높았습니다. _박명철

JSX 문법부터 컴포넌트 생성과 상태 관리, 스타일링까지 실무에 필요한 기본기를 탄탄히 쌓을 수 있도록 구성되었습니다. 리액트 개발에 필요한 지식 전반을 쉽고 명확하게 설명하며, 필수 개념과 패턴을 실습과 함께 균형 있게 다루어 초중급 개발자에게 매우 유용합니다. _박상길

리액트의 개념을 체계적으로 설명해 입문자도 쉽게 이해할 수 있고, 실전 프로젝트로 배운 이론을 즉시 적용해 개발 능력을 향상시키는 데 큰 도움이 되었습니다. 리액트에 입문하려는 사람이 보면 개념 이해와 실전 적용 능력을 동시에 다질 수 있는 훌륭한 책입니다. _박상덕

리액트에 관해 다른 자료를 찾아보지 않아도 될 만큼 내용이 매우 잘 정리되어 있습니다. 다양한 실습 예제로 리액트를 어떻게 활용해야 하는지 익힐 수 있었고, ‘1분 퀴즈’와 ‘마무리’는 중요 개념을 복기하고 정리하는 데 충분했습니다. 리액트를 처음 접하는 입문자는 물론, 리액트를 알고 있지만 다시 한번 정리하고 싶은 사람에게도 매우 유익한 책입니다. _박서영

이론 설명에 그치지 않고, 계산기와 할 일 관리 애플리케이션을 직접 구현하면서 개념을 즉시 활용해볼 수 있어 학습 효과가 뛰어났습니다. 또한 셀프체크와 도전과제는 정말 유용했습니다. 단순히 따라 하기에서 끝나지 않고, 스스로 문제를 해결하며 리액트 개발 역량을 한 단계 끌어올릴 수 있었습니다. 리액트 학습서로 단연 최고의 선택이라고 자신합니다. _여병훈

‘왜 리액트를 배워야 하는가’라는 기초적인 질문에서 출발해, 입문자가 꼭 알아야 할 핵심 내용을 단계적으로 소개하고 있습니다. 실습 예제 또한 상세하게 구성되어 독자가 직접 코드를 따라 하며 핵심 개념을 자연스럽게 익힐 수 있습니다. 특히 리액트 18과 19 버전에 따른 사용법 차이와 최신 정보까지 포함되어서 향후 리액트 프로젝트를 진행할 때 실질적인 도움이 될 만한 내용이 풍부하게 담겨 있습니다. _이승현

바이브 코딩으로 프런트엔드 부분을 쉽게 개발할 수 있었으나 원하는 페이지로 만들려면 결국 리액트를 배워야 하더라고요. 어떻게 공부해야 할지 고민이 컸는데 이 부분을 딱 해결해주는 것이 바로 이 책이었습니다. 책을 읽는 동안 컴포넌트를 어떻게 배치하고 최적화할지 생각해볼 수 있어서 너무 좋았습니다. 내용도 읽기 쉽게 잘 서술되어서 리액트를 처음 공부하는 분께 강력히 추천합니다! _이장훈

문법과 기초 사용법을 상세하게 설명해 초보자도 이해하기 쉬웠고, 실무에서 사용하는 코드 작성 방법도 알려줘서 매우 유익했습니다. 실습 예제를 따라 작성하면서 리액트의 사용법과 프런트엔드 웹 개발 방법을 자연스럽게 배울 수 있었습니다. 리액트의 기본기를 다지고 싶다면 이 책을 꼭 추천하고 싶습니다. _정한민

단순히 지식을 나열하는 것이 아니라, 실무 경험이 풍부한 개발자의 조언이 곳곳에 녹아 있어 큰 도움이 되었습니다. 실습과 퀴즈로 이해하지 못한 부분을 스스로 점검할 수 있었습니다. 한 번 읽고 끝나는 책이 아니라 필요할 때마다 꺼내어 볼 수 있는 든든한 길잡이와 같은 책입니다. _최보아

저자의 노하우가 담겨 있는 점이 특히 좋았고, 장이 끝날 때마다 퀴즈나 마무리로 정리해주는 부분도 만족스러웠습니다. 한 번에 다 이해하진 못하더라도 꼭 알고 넘어가야 할 내용을 간단히 정리해서 학습하는 데 도움이 되었습니다. _황수지

  작가 소개

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

  목차

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 복잡한
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로 배포하기

  회원리뷰