자바스크립트 기초부터 애플리케이션 배포까지

처음 시작하기 딱 좋은 리액트 입문서

 

이 책은 웹 개발에서 가장 많이 사용하는 프레임워크인 리액트의 사용 방법을 소개합니다. 인프런, 유데미에서 누적 20,000여 명이 수강한 베스트 강좌를 책으로 엮었습니다. 프런트엔드 개발을 희망하는 사람들을 위해 리액트의 기본을 익히고 다양한 앱을 구현하는 데 부족함이 없도록 만들었습니다.

 

이런 분들께 추천합니다

- 자바스크립트 기초 지식이 부족해 리액트 공부를 망설이는 분

- 프런트엔드 개발을 희망하는 취업준비생으로 리액트가 처음인 분

- 퍼블리셔나 백엔드에서 프런트엔드로 직군 전환을 꾀하거나 업무상 리액트가 필요한 분

- 뷰, 스벨트 등 다른 프레임워크를 쓰고 있는데, 실용적인 리액트를 배우고 싶은 분

- 신입 개발자이지만 자바스크립트나 리액트 기초가 부족한 분

 

인프런, 유데미 베스트 강좌를 책으로 만나다

2022년 ‘한 입 크기로 잘라 먹는 리액트’ 강좌는 “더 쉽게 가르칠 방법은 언제나 있다”고 생각하는 강사의 믿음에서 시작된 강의입니다. 딱딱한 원리 설명이 주를 이루는 온라인 강좌 시장에서, 이 강의는 적절한 비유와 예시를 통해 리액트를 머릿속에 쏙쏙 들어오도록 쉽고 재밌게 소개했습니다. 현재까지 누적 학생20,000여 명이 수강하고, 지금도 3,000여 명의 열혈 수강생들과 SNS와 카페에서 리액트 관련 정보를 공유하는 이 강의를 이제 책으로도 볼 수 있습니다.

 

한 입에 쏙 들어가는 친절한 리액트 책을 찾았다

이 책을 먼저 접한 베타테스터의 공통된 이야기는 하나입니다. 기존 리액트 책과 달리 매우 친절하다는 겁니다. ‘정말 잘 읽힌다’, ‘상냥하다’, ‘과외받는 느낌이다’, ‘친절하다’라는 베타테스터의 수식어들이 이 책의 특징을 잘 표현합니다. 일상 용어나 비유를 동원해 쉽게 설명하려는 노력, 어려운 개념을 도해나 〈TIP〉 같은 보조 설명으로 풀어내는 센스, 잘게 쪼갠 코드 예시와 상세한 해설까지, 입문자를 배려한 저자의 정성을 이 책 구석구석에서 만나 볼 수 있습니다.

 

리액트를 다루는 데 꼭 필요한 자바스크립트의 핵심을 엄선하다

입문자가 리액트를 배울 때 종종 막히는 지점의 하나는 익숙하지 않은 자바스크립트 문법을 만날 때입니다. 리액트 개념도 만만치 않은데, 기본서에서는 잘 다루지 않는 자바스크립트 문법까지 나오니 공부 난이도가 대폭 올라갑니다. 이 책은 기초는 물론 콜백 함수, 객체 활용, 배열 메서드, 비동기 등과 같이 실무에서 자주 사용하지만 익숙하지 않은 자바스크립트 문법을 쉬운 해설과 예시로 탄탄히 익힐 수 있게 합니다.

 

3개의 단계별 프로젝트 구현으로 리액트 개발에 익숙해지다

이 책에서는 [카운터], [할 일 관리], [감정 일기장]과 같은 3개의 프로젝트 앱을 만듭니다. 프로젝트 구현은 서로 연관성이 높은 기능을 낮은 수준에서 높은 수준으로 조금씩 확장해 가는 나선형식 반복 학습 구성입니다. 쉽게 말하면 코드 구현은 비슷해 금방 익숙해지지만, 기능의 복잡도는 점차 증가하는 식입니다. 구현 역시 기능의 확장뿐만 아니라 기존 코드의 업그레이드, 요구 분석에 따른 리팩터링에 이르기까지 다양한 수준에서 이루어집니다. 따라서 리액트의 기능을 반복 구현하는 과정에서 기본기를 탄탄히 다지게 되며, 새로운 기능을 어떻게 기존 코드와 통합할지 생각하는 능력도 기를 수 있습니다.

 

리액트 생태계의 변화에 따라 이번 개정판에서는 다음과 같이 일부 내용을 변경합니다.

1. 2025년에 출시된 리액트 19버전을 사용합니다.

2. 자바스크립트 실습 환경을 코드샌드박스에서 비주얼 스튜디오 코드로 변경합니다.

3. 리액트 앱 생성 도구를 기존 CRA에서 Vite로 변경합니다.

4. 서비스 배포 플랫폼을 Firebase에서 Vercel로 변경합니다.

[목 차]

2판을 발간하며

지은이의 글
감사의 글
베타테스터의 글

1장 자바스크립트 기초
처음 만나는 자바스크립트

비주얼 스튜디오 코드 설치하기
변수와 상수
자료형
형 변환
연산자
조건문
반복문
함수
스코프
객체
배열

2장 자바스크립트 실전
truthy & falsy
단락 평가
객체 자료형 자세히 살펴보기
반복문 응용하기
구조 분해 할당
스프레드 연산자와 rest 매개변수
배열과 메서드
Date 객체와 날짜
비동기 처리

3장 Node.js
Node.js란?
Node.js 환경 설정하기
Node.js 패키지
Node.js 모듈 시스템
라이브러리 사용하기

4장 리액트 시작하기
리액트의 특징
리액트 앱 만들기
리액트 앱의 동작 원리

5장 리액트의 기본 기능 다루기
컴포넌트
JSX
컴포넌트에 값 전달하기
이벤트 처리하기
컴포넌트와 상태
Ref

project 1 [카운터] 앱 만들기
프로젝트 준비하기
UI 구현하기
기능 구현하기

6장 라이프 사이클과 리액트 개발자 도구
리액트 컴포넌트의 라이프 사이클
useEffect
리액트 개발자 도구

project 2 [할 일 관리] 앱 만들기
프로젝트 준비하기
UI 구현하기
기능 구현 준비하기
Create: 할 일 추가하기
Read: 할 일 리스트 렌더링하기
Update: 할 일 수정하기
Delete: 할 일 삭제하기

7장 useReducer와 상태 관리
useReducer 이해하기
[할 일 관리] 앱 업그레이드

8장 최적화
최적화와 메모이제이션
함수의 불필요한 재호출 방지하기
불필요한 컴포넌트 리렌더 방지하기
불필요한 함수 재생성 방지하기

9장 컴포넌트 트리에 데이터 공급하기
Context
Context로 [할 일 관리] 앱 리팩토링하기

project 3 [감정 일기장] 만들기
프로젝트 준비하기
페이지 라우팅
리액트 라우터로 페이지 라우팅하기
리액트 라우터로 동적 경로 라우팅하기
공통 컴포넌트 구현하기 1: Button, Header 컴포넌트
공통 컴포넌트 구현하기 2: Editor 컴포넌트
공통 스타일 설정하기
일기 관리 기능 만들기
Home 페이지 구현하기
Diary 페이지 구현하기
New 페이지 구현하기
Edit 페이지 구현하기
최적화

10장 웹 스토리지 이용하기
웹 스토리지
일기 데이터를 웹 스토리지에 보관하기

11장 [감정 일기장] 배포
[감정 일기장] 프로젝트 배포 준비하기
리액트 앱 배포하기

찾아보기

 

[본 문]

유행을 타는 책이 아니라, 오래 꺼내 보는 책을 만들자. - ‘2판을 발간하며’의 서두에서, xii

 

《한 입 크기로 잘라 먹는 리액트》는 전반부에 리액트를 배우기 위해 꼭 필요한 자바스크립트 문법(기초 & 심화 문법)과 Node.js의 기초를 다룹니다. 따라서 HTML과 CSS에 대한 기본 지식만 있다면 이들 선수 지식을 익히고 나서 바로 리액트를 시작할 수 있습니다. - 지은이의 글, xiv

 

예제는 복합적인 기능을 한 번에 설명하기 보다는 가능한 한 이를 잘게 쪼개 점층적으로 공부하도록 구성했습니다. 그래야 리액트의 개념과 동작 원리를 제대로 이해할 수 있을 테니까요. “한 입 크기로 잘라 먹는다”라는 이 책의 제목도 바로 이런 생각들을 반영해 나온 겁니다. - 지은이의 글, xiv

 

이 책을 완독한다면 프런트엔드 직군 면접 때 단골로 나오는 ‘변수 호이스팅에 대해 설명하시오’, ‘브라우저 DOM과 리액트의 Virtual DOM에 대해 설명하시오’와 같은 질문에도 자신 있게 답할 수 있을 것 같습니다.” - 베타테스터의 글 중에서, xxiii