한 입 크기로 잘라 먹는 리액트 (자바스크립트 기초부터 애플리케이션 배포까지 | 개정판)

이정환

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

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

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

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

2판을발간하며
지은이의글
감사의글
베타테스터의글

1장자바스크립트기초
처음만나는자바스크립트
비주얼스튜디오코드설치하기
변수와상수
자료형
형변환
연산자
조건문
반복문
함수
스코프
객체
배열

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

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

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

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

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

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

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

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

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

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

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

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

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

찾아보기

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

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

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

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

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

>베타테스터의말말말!

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

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

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

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

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

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

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

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

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

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

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

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