한 입 크기로 잘라 먹는 리액트(개정판)(프로그래밍인사이트)

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

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

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

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

리액트 생태계의 변화에 따라 이번 개정판에서는 다음과 같이 일부 내용을 변경합니다.
1. 2025년에 출시된 리액트 19버전을 사용합니다.
2. 자바스크립트 실습 환경을 코드샌드박스에서 비주얼 스튜디오 코드로 변경합니다.
3. 리액트 앱 생성 도구를 기존 CRA에서 Vite로 변경합니다.
4. 서비스 배포 플랫폼을 Firebase에서 Vercel로 변경합니다.

>베타테스터의 말말말!

"자바스크립트 기초부터 차근차근 알려 주는 리액트 책은 처음 만나 봅니다. 헷갈리는 개념도 예시 코드로 쉽게 풀어 설명하는 정말 친절한 책입니다. 처음 리액트에 도전한다면 이 책으로 입문해 보는 걸 추천합니다" - 김기현 님
"자바스크립트에 대한 기초 지식을 쌓고 리액트를 막 공부하려는 분께 추천합니다. 복잡한 개념도 예시로 쉽게 설명하고 있고, 실무에서는 어떤 식으로 활용되는지도 알려 줍니다. 덕분에 리액트에 대한 전반적인 지식을 쌓을 수 있었습니다." - 정미경 님

"검색해도 이해가 어려운 용어를 이나 <여기서 잠깐!> 코너에서 알려 주어 좋았습니다. 객체와 참조, 리액트 앱의 동작 원리, 브라우저의 렌더링 과정, 가상 돔이 업데이트되는 과정 등 필요한 핵심 개념을 글과 그림으로 쉽게 알려 줍니다. 자바스크립트도 기초 문법만이 아니라 깊이 있는 내용까지 다루고 있어 매우 유익했습니다." - 김민욱 님

"프로젝트 책이다 보니 자바스크립트와 리액트에 대한 기초 지식을 딱 필요한 만큼만 설명했고, 추상적인 개념들도 비유를 들어 적절히 설명했습니다. 무엇보다 예제들이 좋았습니다. 길지 않은 코드임에도 실무에서 이 코드가 어떤 식으로 쓰이는지 알려 주어 도움이 되었습니다. 중요 코드에 대한 코멘트가 바로 밑에 있어 이해하는 데 도움이 되었습니다. 실습 위주로 되어 있는 이 책을 먼저 읽어 기본 흐름을 파악한 후에, 이론을 깊이 다룬 책을 본다면 유익하겠다는 생각이 들었습니다." - 오광영 님

"가장 좋았던 것은 자바스크립트를 자세히 다루었다는 점입니다. 시중의 리액트 책은 자바스크립트의 설명이 부족하거나 어색해 잘 이해되지 않았던 경우가 많았고, 다루는 중요 함수도 적었습니다. 또한 이 책은 이론도 자세합니다. 이 책을 완독한다면 프런트엔드 직군 면접 때 단골로 나오는 '변수 호이스팅에 대해 설명하시오', '브라우저 DOM과 리액트의 Virtual DOM에 대해 설명하시오'와 같은 질문에도 자신 있게 답할 수 있을 것 같습니다." - 김동현 님

"구글링이 필요 없을 정도로 설명이 친절합니다. 핵심 개념을 받아들이기 쉽게 설명하기 때문에 막힘 없이 따라갈 수 있었고, 실무에서 자주 사용하는 기법까지 소개되어 있습니다. 자바스크립트 기초부터 리액트를 활용한 예제까지 다루고 있기에 웹 개발의 흐름을 모두 배울 수 있습니다. 리액트를 배우고자 한다면 이 책 한 권이면 충분하다고 생각합니다." - 신승빈 님

"저같이 리액트에 입문하는 이에게 좋은 책입니다. 기술의 탄생 배경은 물론 어려운 용어에 대한 상세 설명까지 리액트의 거의 모든 내용을 망라하고 있습니다. 단계별 실습 프로젝트도 담고 있어 따라 하는 과정에서 리액트를 보다 깊이 이해할 수 있었습니다." - 이동환 님

"자바스크립트 기초부터 리액트까지 한 번에 배울 수 있어 좋았습니다. 또한 설명이 상세해서 초보 비전공자가 공부하기에 좋았는데, <여기서 잠깐>이나 같은 구성이 이런 디테일을 더해 주는 듯했습니다. 리액트를 어떻게 공부할지 막막하다면 이 책으로 시작하는 걸 추천합니다." - 원도윤 님

"입문자 입장에서는 모든 내용을 한 번에 이해할 수는 없었지만, 깔끔한 이미지나 주석 등의 보조 도구가 있어 이해에 많은 도움이 되었습니다. 웹 개발은 실전에서 도움이 되는 게 중요한데, 기본 개념에 머물지 않고 이를 응용하는 내용까지 포함하고 있어 유용했습니다. 꼭 추천합니다." - 조상아 님

"제목 그대로, 한 입 크기 음식을 먹을 때처럼 리액트 프로그래밍을 쉽게 배우는 책입니다. 프로젝트 파트에서는 리액트 기능뿐만 아니라 요구사항 분석과 같이 완성도 있는 프로젝트를 만들기 위한 내용도 포함되어 있습니다. 이 책을 완독한다면 리액트를 사용해 원하는 프로젝트를 만들 수 있을 것으로 예상됩니다. 무엇보다 공식 문서를 읽을 때보다 잘 읽히고 이해가 잘 됩니다. 쉽게 설명해 주시려는 게 느껴집니다." - 장승휘 님

"이 책은 리액트를 배우고 싶은데 자바스크립트를 전혀 모르는, 아니 개발 공부를 전혀 한 적이 없는 초보자까지도 공부할 수 있겠다는 생각이 듭니다. 상냥한 느낌이 들 정도로 리액트를 처음 공부하는 사람을 위한 예시나 비유가 적절합니다. 저처럼 이해가 안 되면 다음 장을 못 넘기는 사람들에게 추천하고 싶습니다." - 이현경 님

"장마다 학습 목표를 제시해 무엇을 배우는지 이해할 수 있었고 그로 인해 집중도가 높아졌습니다. 어려운 전공 서적들과는 달리 설명과 예시가 쉽게 구성되어 있어 친절하게 과외받는 느낌이었습니다. 비전공자는 용어에 좀 더 초점을 두게 되는데, 사소한 용어도 <여기서 잠깐> 코너로 설명되고 있어 내심 소름 돋았습니다. 또한 리액트 책인데도 자바스크립트를 자세히 다루고 있어 마치 두 마리 토끼를 잡는 것 같은 느낌입니다" - 이진희 님

"자바스크립트, 리액트를 처음 배우는 사람도 거부감 없이 학습할 수 있는 정도의 난이도로 구성되어 있습니다. 제가 다른 리액트 서적은 전혀 본 적이 없어 비교는 불가능하지만, 이 책은 왕초보인 제게도 어렵지 않게 다가왔습니다. 기본기에서 시작해 프로젝트를 하나씩 구현해 보는 과정이 점점 흥미롭게 다가왔습니다." - 도윤서 님

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장 [감정 일기장] 배포
[감정 일기장] 프로젝트 배포 준비하기
리액트 앱 배포하기

찾아보기

이정환 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 교육자입니다. 스타트업 CTO로 일하며 쌓아 온 지식과 경험을 바탕으로, 아무리 복잡한 개념도 한 입 크기로 잘라 먹듯이 차근차근 공부하면 누구나 쉽게 깨칠 수 있다는 생각으로 강의와 도서를 만드는 데 노력하고 있습니다. 현재까지 인프런과 유데미에서 누적 수강생 40,000명을 배출했습니다.
수강생 및 독자와의 소통을 매우 중요시합니다. 2022년부터 오픈 채팅방과 네이버 카페를 통해 현재 약 3,000명 이상의 수강생 및 독자와 소통하고 있습니다.

강의 목록
- '한 입 크기로 잘라 먹는 리액트'
- '한 입 크기로 잘라 먹는 타입스크립트'
- '한 입 크기로 잘라 먹는 Next.js'
- '한 입 크기로 잘라 먹는 실전 프로젝트 ? SNS'

저서
《한 입 크기로 잘라 먹는 리액트》
《한 입 크기로 잘라 먹는 Next.js》

약력
- 패스트캠퍼스 프런트엔드 데브캠프 멘토
- 프로그래머스 프런트엔드 부트캠프 멘토
- 코드잇 스프린트 프런트엔드, 풀스택 과정 멘토
- 스타트업 CTO