한 입 크기로 잘라먹는 리액트《한 입 크기로 잘라 먹는 리액트》는 총 11개의 장과 3개의 프로젝트로 구성되어 있습니다.
1장 자바스크립트 기초
리액트는 자바스크립트 라이브러리입니다. 따라서 자바스크립트에 익숙하지 않다면 리액트는 학습하기 어렵습니다. 1장에서는 자바스크립트가 어떤 언어인지 알아봅니다. 온라인 에디터를 이용해 자바스크립트의 기본 문법을 살펴보고 실습합니다. 자바스크립트의 기본 지식이 있는 분은 2장부터 볼 것을 권장합니다.
2장 자바스크립트 실전
기초 자바스크립트 문법 만으로 리액트를 다룰 수는 없습니다. 2장에서는 객체의 특징이나 배열 메서드, 날짜 객체, 동기 및 비동기 처리같이 실무에서 자주 사용하는 자바스크립트 문법을 집중적으로 배웁니다. 이 과정이 여러분의 자바스크립트 실력을 한 단계 업그레이드해 줄 겁니다.
3장 Node.js
자바스크립트의 역사는 Node.js 등장 이후 격변했습니다. 리액트 또한 Node.js를 기반으로 동작합니다. 따라서 리액트를 배우려면 Node.js에 대한 기초 지식이 필요합니다. 3장에서는 Node.js란 무엇인지, 어떤 배경에서 탄생했는지 알아봅니다. 실습 환경을 구성하면서 Node.js의 기본 사용법도 함께 배웁니다.
4장 리액트 시작하기
새로운 기술을 배울 때는 이 기술의 특징과 동작 원리를 이해하는 게 중요합니다. 4장에서는 리액트 기술의 역사적 배경과 특징을 살펴보고, 첫 번째 앱을 만들면서 리액트의 동작 원리까지 함께 알아봅니다.
5장 리액트의 기본 기능 다루기
리액트는 대규모 웹 애플리케이션을 개발하기 위한 다양한 기능을 제공합니다. 5장에서는 리액트 기술의 핵심이라고 할 수 있는 컴포넌트, Props, State 같은 기본 기능을 실습으로 알아봅니다. 이 장은 리액트의 기본 기능을 망라하고 있기 때문에 천천히 학습하면서 개념과 동작 원리를 완벽히 이해하는 장으로 삼아야 합니다.
프로젝트 1: [카운터] 앱 만들기
기본 기능을 익혔다면 이제 의미 있는 무언가를 만들어야 합니다. 코딩의 즐거움은 무언가를 만들 때 비로소 발현됩니다. 프로젝트 1에서는 리액트를 이용해 손쉬운 [카운터] 앱을 만듭니다. 이 과정에서 자연스럽게 리액트 앱을 만들기 위한 분석과 설계 방식도 함께 알게 됩니다.
6장 라이프 사이클과 리액트 개발자 도구
리액트 컴포넌트의 라이프 사이클을 이해하면 더 복잡한 기능도 간단히 구현할 수 있습니다. 앞서 만든 [카운터 앱]을 이용해 리액트 컴포넌트의 라이프 사이클을 이해합니다. 그리고 리액트 앱을 효과적으로 사용하도록 도와주는 리액트 개발자 도구를 만나 봅니다.
프로젝트 2: [할 일 관리] 앱 만들기
웹 서비스 개발에서 가장 기본적인 기능을 하나 고른다면 데이터를 다루는 CRUD(추가, 조회, 수정, 삭제) 기능입니다. 리액트에서도 데이터를 다루는 CRUD 기능이 매우 중요합니다. 프로젝트 2에서 [할 일 관리] 앱을 만들면서 리액트가 데이터를 어떻게 다루는지 살펴봅니다. 이 과정을 거치면 간단한 앱 정도는 능히 도전해 볼 수 있는 능력을 갖추게 될 겁니다.
7장 useReducer와 상태 관리
리액트의 상태를 관리할 때는 많은 양의 코드가 필요합니다. 그러나 하나의 파일 또는 함수에 많은 코드가 있다면 유지 보수가 어렵습니다. 7장에서는 상태 관리 코드를 어떻게 분리 하는지 살펴보면서 [할 일 관리] 앱을 한 단계 업그레이드합니다.
8장 최적화
모바일의 발달로 오늘날 웹 서비스를 더 빠르게 동작하는 일은 매우 중요해졌습니다. 이 장에서는 리액트 앱을 최적화하는 여러 도구와 기법을 알아봅니다. 프로젝트 2에서 만든 [할 일 관리] 앱을 최적화합니다.
9장 컴포넌트 트리 전체에 데이터 공급하기
리액트는 컴포넌트가 부모-자식 관계로 서로 이어진 계층 구조를 이루며 단방향으로 데이터를 전달합니다. 이런 구조는 데이터의 흐름을 파악하기는 쉽지만 몇 가지 문제점을 일으킵니다. 이 장에서는 리액트 계층 구조에서 일어날 수 있는 문제들을 살펴보면서 Context를 이용해 이를 효과적으로 해결하는 방법을 살펴봅니다. 이 과정에서 [할 일 관리] 앱을 새롭게 리팩토링합니다.
프로젝트 3. 감정 일기장 만들기
프로젝트 3에서는 여러 페이지로 구성된 좀 더 복잡한 리액트 앱 [감정 일기장]을 만듭니다. [감정 일기장]을 만들며 지금까지 배운 리액트 개념을 다시 복습하고 더 깊이 이해합니다. 또한 실무에서 사용하는 여러 유용한 기법도 함께 배웁니다.
10장 웹 스토리지 이용하기
프로젝트 3에서 만든 [감정 일기장]은 별도의 데이터베이스가 없어 데이터를 보관 할 수 없습니다. 이 장에서는 브라우저의 데이터베이스인 웹 스토리지를 이용해 데이터를 영구적으로 보관하는 방법을 알아봅니다.
11장 감정 일기장 배포하기
프로젝트로 앱을 만들었지만 배포하지 않는다면, 자신 외에 아무도 이 앱을 사용할 수 없습니다. 이 장에서는 파이어베이스를 이용해 앞서 만든 [감정 일기장] 앱을 실제로 웹에 배포하는 법을 알아봅니다.
학습 자료
이 책은 코드를 직접 작성하는 실습 예제가 풍부하게 실려있습니다. 만약 실습 도중 오류가 발생하여 원본 코드를 확인하고 싶을 때는 다음 링크에서 확인할 수 있습니다.
one-bite-react
winterlood • Updated Feb 20, 2024
예제 코드는 장(chapter) 또는 프로젝트(project) 단위로 정리되어 있습니다.
실습 강의
이 책은 유데미, 인프런에서 시연되고 있는 온라인 강의 《한 입 크기로 잘라 먹는 리액트》를 기반으로 제작되었습니다. 강의 내용을 더 쉽고 짜임새 있게 다듬었기 때문에 내용이 100% 일치하지는 않지만, 책과 강의 모두 비슷한 구성으로 이루어져 있습니다. 또한 강의에서는 저자가 어떤 순서로 코드를 작성하는지 직접 눈으로 살펴볼 수 있기에 책과 강의를 동시에 학습하는 것도 괜찮습니다.
