리액트 잘하는 개발자 되기

리액트, 리덕스, 주스탠드, 파이어베이스와 40여 가지 예제로 배우는 React 프론트엔드 입문자를 위한 풀 패키지

성낙현 지음

골든래빗(주) 2025년 12월 02일 출간 국내도서 : 2025년 11월 07일 출간

작품소개

책소개

환영합니다. 리액트를 잘하고 싶은데 어떻게 할지 모르겠는 분이라면, 잘 찾아오셨습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 클라이언트와 서버의 동작 방식, HTML/CSS/JS의 역할, 브라우저 렌더링 과정, SPA, CSR, SSR, SSG와 같은 핵심 개념 등을 먼저 학습하여, 원리 중심의 튼튼한 기반을 다질 수 있게 합니다. 40여 예제를 바탕으로 리액트 입문자가 이론과 실습을 겸하여 실력 있는 프론트엔드 개발자로 성장하도록 돕습니다. 리액트의 핵심 개념인 컴포넌트, 프롭스, 스테이트부터 성능 최적화 훅과 리덕스 툴킷, 주스탠드와 같은 전역 상태 관리까지 체계적으로 다룹니다. 또한 실무형 게시판, 스코어보드, 카카오톡 앱을 직접 만들고 파이어베이스 연동 및 깃허브 배포까지 경험하며 완성도 높은 웹 서비스 구현 역량을 기를 수 있습니다.

[내코부] 채널로 오세요.
골든래빗은 함께 모여서 함께 공부하고, 토론하고, 네트워크를 쌓으며 완독하면 더 탄탄하게 성장할 수 있다고 믿습니다. 개발자 성장 프로젝트, 〈내코부, 내코드를 부탁해〉 디스코드/카톡 채널로 오세요.

- 카톡방 : open.kakao.com/o/ggK7EAJh
- 디스코드 : discord.com/invite/BYRpaDrfbH

[되기] 시리즈를 소개합니다.
[되기] 시리즈는 특정 영역의 일원으로서 알아야 하는 지식을 넓게 알려줍니다. 로드맵을 제시하고 실무에 유용한 기술만 선별하여 알려드립니다.

목차

00장 프론트엔드 개발자가 알아두면 좋은 지식
_0.1 웹의 동작 원리
__0.1.1 클라이언트와 서버
__0.1.2 요청과 응답의 흐름
__0.1.3 상태 코드로 결과 확인
_0.2 HTML, CSS, 자바스크립트의 기본 역할
__0.2.1 HTML : 콘텐츠의 구조 담당
__0.2.2 CSS : 콘텐츠의 스타일 담당
__0.2.3 자바스크립트 : 웹페이지의 동작 담당
_0.3 웹 표준과 접근성
__0.3.1 웹 표준이란?
__0.3.2 웹 접근성이란?
_0.4 브라우저 렌더링과 성능 최적화
__0.4.1 브라우저 렌더링 과정 이해하기
__0.4.2 리플로와 리페인트의 차이
__0.4.3 성능에 영향을 주는 요소들
_0.5 개발 환경과 워크플로
__0.5.1 필수 개발 도구
__0.5.2 최고의 품질을 위한 자동화 시스템
__0.5.3 빌드 도구와 트랜스파일링, 번들링
_0.6 현대 프론트엔드 트렌드와 감각
__0.6.1 반응형 디자인
__0.6.2 UI/UX 설계 원칙
__0.6.3 최신 프론트엔드 키워드
_학습 마무리
_연습문제


[LEVEL 1] 처음 만나는 리액트


01장 리액트 개발 환경 준비하기
_1.1 윈도우에 리액트 설정하기
__1.1.1 Node.js 설치하기
__1.1.2 VSCode 설치하기
_1.2 맥OS에 리액트 설정하기
__1.2.1 Node.js 설치하기
__1.2.2 VSCode 설치하고 프로젝트 폴더 설정하기
_1.3 VSCode 환경 설정하기
__1.3.1 VSCode에서 작업 공간 설정하기
__1.3.2 확장 프로그램 설치하기
__1.3.3 기본 터미널 변경하기 : 윈도우
__1.3.4 코드 입력 시 탭 크기 4에서 2로 변경하기
__1.3.5 자동 저장 켜기


02장 리액트 프로젝트 생성하기
_2.1 비트로 프로젝트 생성하기
_2.2 프로젝트 정리하기
_2.3 리액트 개발을 위한 크롬 확장 프로그램 설치
_학습 마무리
_연습문제


[LEVEL 2] 리액트의 기초 배우기


03장 리액트 컴포넌트
_3.1 리액트 컴포넌트 알아보기
_3.2 컴포넌트 구조 살펴보기
_3.3 JSX란 무엇인가요?
_3.4 컴포넌트는 어떻게 표시해야 할까?
_3.5 프로젝트 생성 및 HTML로 기초 화면 구성하기
_3.6 리액트 컴포넌트로 교체하기
_3.7 컴포넌트 작성해보기
_학습 마무리
_연습문제


04장 프롭스
_4.1 프롭스 알아보기
_4.2 프롭스 사용해보기
__4.2.1 반복되는 요소에 중복되지 않는 key prop 추가하기
_4.3 프롭스 여러 개 사용해보기
__4.3.1 구조 분해 할당으로 프롭스 여러 개 사용해보기
_학습 마무리
_연습문제


05장 리액트 이벤트 처리
_5.1 리액트 이벤트 처리 알아보기
_5.2 이벤트 핸들러 onClick에 함수 전달하기
_5.3 FrontComp, BackComp에서 무엇이 달랐을까?
__5.3.1 태그의 이벤트 처리 시 기본 동작을 차단하는 preventDefault( ) 함수
_학습 마무리
_연습문제


06장 컴포넌트 모듈화
_6.1 컴포넌트 모듈화의 필요성
_6.2 export default로 컴포넌트 내보내기
_6.3 import로 컴포넌트 가져오기
_학습 마무리
_연습문제


07장 상태
_7.1 상태 알아보기
_7.2 상태 사용해보기
_학습 마무리
_연습문제


08장 스타일과 이미지
_8.1 리액트에서 스타일을 적용하는 방법
_8.2 이미지를 삽입하는 방법
_8.3 CSS 파일 작성하기
_8.4 CSS와 이미지 적용하기
_학습 마무리
_연습문제


09장 폼값 전송
_9.1 폼값 전송하기
_학습 마무리
_연습문제


10장 얕은 비교
_10.1 얕은 비교와 깊은 비교 알아보기
_10.2 얕은 비교 실습하기
_학습 마무리
_연습문제


11장 라우터
_11.1 라우터 알아보기
_11.2 프로젝트 생성 및 React Router DOM 설치하기
_11.3 라우팅 처리해보기
_11.4 Outlet 컴포넌트 알아보기
_11.5 Outlet 컴포넌트로 공통 레이아웃으로 사용할 컴포넌트 만들기
_11.6 라우터 훅 알아보기
_11.7 라우터 훅 사용해보기
_학습 마무리
_연습문제


12장 생명주기
_12.1 생명주기 알아보기
_12.2 클래스형 컴포넌트에서의 생명주기
_12.3 함수형 컴포넌트와 useEffect 훅
_12.4 로컬 JSON 파일과 통신하기
_12.5 외부 API 통신하기
__12.5.1 randomuser.me 살펴보기
_학습 마무리
_연습문제


[LEVEL 3] 리액트 훅


13장 성능 최적화를 위한 훅
_13.1 프로젝트 생성하기
_13.2 useRef 훅 알아보기
_13.3 useMemo 훅 알아보기
_13.4 useCallback 훅 알아보기
_13.5 useId 훅 알아보기
_학습 마무리
_연습문제


14장 전역 상태 관리를 위한 훅
_14.1 프로젝트 생성하기
_14.2 useReducer 훅 알아보기
_14.3 useContext 훅 알아보기
_학습 마무리
_연습문제


15장 고급 기능을 위한 확장 훅
_15.1 프로젝트 생성하기
_15.2 useOptimistic 훅 알아보기
_15.3 useActionState 훅 알아보기
_15.4 useFormStatus 훅 알아보기
_학습 마무리
_연습문제


[LEVEL 4] 리액트 에코시스템


16장 리덕스 툴킷
_16.1 리덕스 툴킷 알아보기
_16.2 리덕스 툴킷의 아키텍처
_16.3 프로젝트 생성하기
_16.4 리덕스 툴킷의 기본 사용법 익히기
_16.5 간단한 할 일 관리 앱 만들기
_학습 마무리
_연습문제


17장 주스탠드
_17.1 주스탠드 알아보기
_17.2 주스탠드 기본 사용법 익히기
_17.3 간단한 출결 관리 앱 만들기
__17.3.1 logger 미들웨어
_학습 마무리
_연습문제


18장 파이어베이스
_18.1 파이어베이스 알아보기
_18.2 파이어베이스 시작하기
_18.3 파이어스토어 데이터베이스 사용해보기
__18.3.1 파이어스토어 데이터베이스 만들기
__18.3.2 프로젝트 생성 및 기본 설정
__18.3.3 연결 및 입력 테스트
__18.3.4 회원 정보 관리 게시판
_18.4 리얼타임 데이터베이스 사용해보기
__18.4.1 리얼타임 데이터베이스 만들기
__18.4.2 프로젝트 생성 및 기본 설정하기
__18.4.3 CRUD 기능 제작하기
__18.4.4 리스너 제작하기
__18.4.5 실시간 채팅 만들기
_18.5 스토리지 사용해보기
__18.5.1 스토리지 만들기
__18.5.2 프로젝트 생성 및 기본 설정하기
__18.5.3 파일 업로드 기능 구현하기
__18.5.4 파일 목록 및 삭제 기능 구현하기
_학습 마무리
_연습문제


[LEVEL 5] 리액트 프로젝트


19장 게시판 제작 1(객체형 배열 사용)
_19.1 프로젝트 생성 후 게시판 기본 화면 만들기
__19.1.1 게시판 기본 화면 HTML로 만들기
__19.1.2 게시판 기본 화면 컴포넌트로 제작하기
__19.1.3 제작한 컴포넌트 App 컴포넌트에 반영하기
_19.2 게시글 목록 표현하기
__19.2.1 App 컴포넌트 수정하기
__19.2.2 ArticleList 컴포넌트 수정하기
_19.3 화면 전환하기
__19.3.1 App 컴포넌트 구조 살펴보고 수정하기
__19.3.2 NavList, NavView 컴포넌트 수정하기
_19.4 작성 기능 추가하기
_19.5 열람 기능 추가하기
_19.6 삭제 기능 추가하기
_19.7 수정 기능 추가하기
__19.7.1 수정 1단계 : 수정 폼에 내용 불러오기
__19.7.2 수정 2단계 : 수정 처리하기
_학습 마무리
_연습문제


20장 게시판 제작 2(REST API 사용)
_20.1 프로젝트 생성하기
__20.1.1 애플리케이션의 골격 만들기
_20.2 API Key 발급하기
_20.3 목록 기능 구현하기
_20.4 작성 기능 구현하기
_20.5 열람 기능 구현하기
_20.6 수정 기능 구현하기
_20.7 삭제 기능 구현하기
_학습 마무리
_연습문제


21장 모달창 이용한 댓글 구현하기 with 로컬스토리지
_21.1 프로젝트 생성하기
_21.2 기본 UI 작성 및 기능 구현하기
_학습 마무리
_연습문제


22장 스코어보드 만들기 with 주스탠드
_22.1 프로젝트 생성하기
_22.2 기본 UI 생성 및 기능 구현하기
_학습 마무리
_연습문제


23장 카카오톡 만들기 with 파이어베이스
_23.1 프로젝트 생성
_23.2 기본 UI 작성 및 기능 구현하기
_학습 마무리
_연습문제


24장 깃허브 페이지로 배포하기
_24.1 리액트 애플리케이션 배포본 만들기
_24.2 웹 서버로 배포 시 라우팅 오류 해결하기
_24.3 깃허브 페이지로 배포하기
_학습 마무리
_연습문제

※ PDF 별책 보너스 부록 《리액트를 위한 자바스크립트 핵심 문법 익히기》 제공

책 속으로

[PART 1] 처음 만나는 리액트

01. hello-react-project : Vite(비트)를 사용하여 리액트 프로젝트를 처음 생성하고 실행해보는 기본 예제로, 숫자 카운터 기능이 포함되어 있습니다(2장).

[PART 2] 리액트의 기초 배우기

02. react01-basic(HTML로 기초 화면 구성) : 리액트를 사용하기 전, 순수 HTML만으로 게시판의 기본 UI(프론트엔드/백엔드 기술 목록 및 입력 폼)를 구성하는 예제입니다(3장).

03. react01-basic(리액트 컴포넌트로 교체) : HTML로 만든 게시판 UI를 리액트의 기본 단위인 컴포넌트(App.jsx)로 변환하는 방법을 보여주는 예제입니다(3장).

04. react01-basic(컴포넌트 작성 및 재사용) : 게시판 UI를 FrontComp, BackComp, FormComp 등 여러 개의 작은 컴포넌트로 분리하고, 이를 조합하여 재사용하는 방법을 학습하는 예제입니다(3장).

05. react01-basic(프롭스를 이용한 데이터 전달) : 부모 컴포넌트(App)에서 자식 컴포넌트(FrontComp, BackComp)로 배열 데이터를 프롭스로 전달하여 동적으로 목록을 생성하는 예제입니다(4장).

06. react01-basic(이벤트 처리) : 컴포넌트 내의 링크(〈a〉 태그) 클릭 시 onClick 이벤트를 처리하고, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 방법을 다루는 예제입니다(5장).

07. react01-basic(스테이트(state)를 이용한 화면 전환) : useState 훅을 사용하여 mode 상태를 만들고, 이 상태값에 따라 '프론트엔드', '백엔드', 또는 '전체' 컴포넌트를 조건부로 렌더링하는 예제입니다(7장).

08. react01-basic(스타일과 이미지 적용) : 인라인 스타일, CSS 파일(className), 다양한 이미지 삽입 방식(import, public 폴더, URL)을 사용하여 컴포넌트를 꾸미는 방법을 학습합니다(8장).

09. react01-basic(폼값 전송 및 처리) : onSubmit 이벤트 리스너를 통해 폼 데이터를 받아 부모 컴포넌트로 전달하고, 입력값 유효성을 검증하여 상태를 업데이트하는 예제입니다(9장).

10. react01-basic(얕은 비교 실습) : 객체 상태를 직접 수정할 때와 복사본을 만들어 수정할 때의 차이를 비교하며, 리액트의 얕은 비교 원리와 리렌더링 최적화 방법을 학습합니다(10장).

[PART 3] 리액트 훅(Hooks)

11. react02-router(라우팅 기본 예제) : react-router-dom을 설치하고 Routes, Route를 이용해 Home, 잘못된 URL(NotFound) 등 기본적인 페이지 라우팅을 설정하는 예제입니다(11장).

12. react02-router(Outlet을 이용한 중첩 라우팅) : 공통 레이아웃(CommonLayout) 안에 Outlet을 배치하여, 하위 경로에 따라 다른 자식 컴포넌트(LayoutIndex)가 렌더링되도록 구성하는 예제입니다(11장).

13. react02-router(라우터 훅 사용) : useLocation 훅으로 현재 URL 정보를, useSearchParams 훅으로 쿼리스트링(?mode=list&pageNum=1)을 읽고 수정하는 방법을 다루는 예제입니다(11장).

14. react03-lifecycle(useEffect 생명주기 관리) : useEffect 훅의 의존성 배열을 변경해가며 컴포넌트의 마운트, 업데이트, 언마운트 시점에 코드를 실행하는 방법을 학습하는 예제입니다(12장).

15. react03-lifecycle(로컬 JSON 파일 통신) : fetch 함수와 useEffect를 사용하여 프로젝트 내부에 있는 로컬 JSON 파일의 데이터를 비동기적으로 불러와 화면에 목록과 상세 내용을 표시합니다(12장).

16. react03-lifecycle(외부 API 통신) : 외부 API(randomuser.me)에 데이터를 요청하여 무작위 사용자 목록을 받아오고, 클릭 시 상세 정보를 경고창으로 보여주는 예제입니다(12장).

17. react04-hook-optimization(useRef로 값 저장 및 DOM 접근) : useRef를 사용하여 리렌더링과 무관하게 값을 유지하는 방법과 특정 DOM 요소(input)에 직접 접근하여 포커스를 제어하는 방법을 학습합니다(13장).

18. react04-hook-optimization(useMemo로 연산 최적화) : 계산 비용이 큰 함수(소수 판별)의 결과를 useMemo로 메모이제이션하여 불필요한 재연산을 방지하고 성능을 개선하는 예제입니다(13장).

19. react04-hook-optimization(useCallback으로 함수 최적화) : 자식 컴포넌트에 전달하는 함수를 useCallback으로 메모이제이션하여 불필요한 함수 재생성과 자식 컴포넌트의 리렌더링을 방지합니다(13장).

20. react04-hook-optimization(useId로 고유 ID 생성) : useId 훅을 사용하여 폼 요소(〈label〉, 〈input〉)에 접근성을 위한 고유하고 일관된 ID를 자동으로 생성하는 방법을 다룹니다(13장).

21. react05-hook-global-state(useReducer로 상태 관리) : useState 대신 useReducer를 사용하여 입출금 로직과 같이 복잡한 상태 변경 규칙을 컴포넌트 외부에서 관리하는 방법을 보여줍니다(14장).

22. react05-hook-global-state(useContext로 전역 상태 공유) : useContext를 사용하여 다크/라이트 모드 테마 상태를 여러 하위 컴포넌트에서 프롭스(props) 전달 없이 직접 공유하는 예제입니다(14장).

23. react06-hook-enhanced(useOptimistic으로 낙관적 업데이트) : 메시지 전송 시 서버 응답을 기다리지 않고 useOptimistic을 통해 UI에 즉시 반영하여 사용자 경험을 향상시키는 예제입니다(15장).

24. react06-hook-enhanced(useActionState로 폼 상태 관리) : useActionState를 사용하여 폼 제출(로그인)의 비동기 처리 결과(성공/실패)를 상태로 관리하고 UI에 피드백을 제공하는 예제입니다(15장).

25. react06-hook-enhanced(useFormStatus로 폼 제출 상태 추적) : useFormStatus를 사용하여 폼 제출 중일 때 버튼을 비활성화하거나 로딩 텍스트를 표시하는 등 UI를 동적으로 제어하는 예제입니다(15장).

[PART 4] 리액트 에코시스템

26. react07-redux-toolkit(리덕스 툴킷 기본 사용법) : 리덕스 툴킷의 createSlice, configureStore를 사용하여 전역 상태로 숫자 카운터를 만들고, useSelector, useDispatch로 상태를 제어합니다(16장).

27. react07-redux-toolkit(할 일 관리 앱) : 리덕스 툴킷을 이용해 할 일(Todo) 목록을 추가, 완료, 삭제하는 기능을 구현하며 실용적인 전역 상태 관리 방법을 학습합니다(16장).

28. react08-zustand(주스탠드 기본 사용법) : 주스탠드(Zustand)를 사용하여 최소한의 설정으로 숫자 카운터 전역 상태를 만들고 컴포넌트에서 사용하는 방법을 보여줍니다(17장).

29. react08-zustand(출결 관리 앱) : 주스탠드를 활용해 학생 목록을 관리(추가, 삭제, 출석 토글)하고, 미들웨어(persist, devtools, logger)를 적용하는 방법을 다룹니다(17장).

30. react09-firestore(파이어베이스 Firestore CRUD 게시판) : 파이어베이스의 Firestore 데이터베이스와 연동하여 회원 정보를 입력(Create), 조회(Read), 수정(Update), 삭제(Delete)하는 게시판 예제입니다(18장).

31. react10-realtime(파이어베이스 Realtime Database CRUD) : 파이어베이스의 실시간 데이터베이스를 사용하여 데이터를 실시간으로 입력, 조회, 수정, 삭제하는 기본적인 CRUD 기능을 구현합니다(18장).

32. react10-realtime(Realtime Database 리스너) : onValue 리스너 함수를 사용하여 실시간 데이터베이스의 데이터 변경을 실시간으로 감지하고 화면에 자동으로 반영하는 예제입니다(18장).

33. react10-realtime(실시간 채팅 앱) : 실시간 데이터베이스의 실시간 동기화 기능을 활용하여 여러 사용자가 동시에 대화할 수 있는 기본적인 채팅 애플리케이션을 제작합니다(18장).

34. react11-storage(파이어베이스 스토리지 파일 업로드/목록) : 파이어베이스 스토리지를 사용하여 이미지 파일을 특정 폴더에 업로드하고, 저장된 파일 목록을 조회 및 삭제하는 기능을 구현합니다(18장).

[PART 5] 리액트 프로젝트

35. project01-board-array(객체 배열을 이용한 게시판) : 외부 서버 없이 순수 리액트 useState와 객체 배열만으로 게시판의 CRUD(생성, 읽기, 수정, 삭제) 기능을 모두 구현하는 종합 실습 예제입니다(19장).

36. project02-board-api(REST API를 이용한 게시판) : 외부 REST API와 fetch 함수를 사용하여 실제 서버와 데이터를 주고받으며 게시판의 CRUD 기능을 구현하는 실무 중심의 예제입니다(20장).

37. project03-live-comments(로컬 스토리지를 이용한 댓글 기능) : 부트스트랩 모달창 UI와 브라우저의 로컬 스토리지를 활용하여 댓글을 작성, 수정, 삭제하고 '좋아요' 기능을 구현합니다(21장).

38. project04-scoreboard(주스탠드를 이용한 스코어보드) : 전역 상태 관리 라이브러리 주스탠드를 사용하여 여러 컴포넌트에 걸쳐 플레이어 점수와 정보를 관리하는 스코어보드를 제작합니다(22장).

39. project05-kakaotalk(파이어베이스를 이용한 카카오톡) : 파이어베이스의 실시간 데이터베이스와 스토리지를 연동하여 프로필 사진 업로드 기능이 포함된 실시간 채팅 애플리케이션을 제작합니다(23장).

40. project05-kakaotalk(깃허브 페이지로 배포하기) : npm run build로 프로젝트를 빌드하고, 라우팅 문제를 해결(HashRouter)하여 완성된 카카오톡 앱을 깃허브 페이지에 배포하는 과정을 다룹니다(24장).

출판사 서평

★ 풍부한 그림과 도표 + 연습문제 125문항 + 핵심 정리 117가지!
★ 체계적인 레벨별 학습 코스, 실무에 바로 적용 가능한 프로젝트 진행까지!
★ 프론트엔드 만들고 ➝ DB 붙이고 ➝ 깃허브로 배포하는 전과정 수록!

바이브 코딩 시대, 리액트는 프론트엔드라는 마지막 오아시스입니다. 직접 모든 걸 하지는 않지만, AI가 생성한 코드를 분석하고 코드를 수정할 줄 알아야 합니다. 구조를 파악하는 능력도 필요합니다. 그래서 리액트를 제대로 배워야 합니다. 모던 프론트엔드는 리액트가 필수입니다. 그렇다면 리액트 어떻게 제대로 배울 수 있을까요? ‘이론 + 예제 + 실제 프로젝트’라는 삼박자가 맞아야 합니다. 이 책은 다음과 같이 세 가지 핵심적인 특징으로 여러분이 리액트 프론트엔드 개발자로 성장하도록 돕습니다.

_첫째, 웹 개발의 기초부터 최신 트렌드까지 한 번에 잡는 탄탄한 이론
이 책은 리액트 문법만 다루는 것을 넘어, 웹의 기본 동작 원리(클라이언트/서버, HTTP)부터 최신 프론트엔드 트렌드(SPA, CSR/SSR/SSG 등)까지 폭넓게 설명합니다. 이러한 배경지식은 실무에서 문제의 원인을 더 빨리 찾고 해결하는 능력을 길러주며, 복잡한 개념을 쉬운 비유로 설명하여 실무 감각을 키우는 데 도움을 줍니다. 결과적으로, 웹 개발의 전체적인 흐름 속에서 리액트를 이해하며 원리 중심의 튼튼한 기반을 다질 수 있습니다.

_둘째, 컴포넌트의 개념과 재사용성을 체감하며 배우는 실습 중심 학습
단순히 코드를 따라 치는 것을 넘어, 먼저 HTML로 화면을 구성한 뒤 이를 리액트 컴포넌트로 전환하는 과정을 통해 컴포넌트의 장점과 재사용성을 직접 체감하도록 안내합니다. 각 장마다 배운 핵심 개념을 게시판, 스코어보드, 채팅 앱 등 실용적인 미니 프로젝트에 바로 적용하며 지식을 응용하는 능력을 기를 수 있습니다. 이처럼 실습 중심의 체계적인 학습 로드맵은 리액트의 핵심인 컴포넌트 기반 사고방식을 자연스럽게 익히도록 돕습니다.

_셋째, 리덕스, 주스탠드, 파이어베이스 등 실무 에코시스템까지 확장
리액트 자체에만 머무르지 않고, 실무에서 필수적으로 사용되는 전역 상태 관리 라이브러리인 리덕스 툴킷(Redux Toolkit)과 주스탠드(Zustand)를 심도 있게 다룹니다. 또한, 별도의 백엔드 서버 없이도 사용할 수 있는 데이터베이스(Firestore, Realtime Database)와 스토리지 기능을 구현할 수 있는 파이어베이스(Firebase) 연동 방법을 학습합니다. 이를 통해 단순한 UI 개발을 넘어, 실제 서비스에 가까운 완성도 높은 애플리케이션을 직접 구축하며 리액트 생태계 전반에 대한 이해를 넓힐 수 있습니다.

★ 리액트 입문자를 위한 웹 배경지식
★ 리액트를 잘 쓰려면 꼭 알아야 하는 40가지 실습
★ 리액트 개발을 핵심 기술 4대장으로 확실하게 알려드려요
이 책은 이러한 성장을 위해 웹의 기초부터 리액트 핵심까지 체계적인 이론을 제시하고, 게시판, 스코어보드, 카카오톡 유사 실시간 채팅 앱 등 다채로운 실전 프로젝트를 포함한 총 40개 이상의 풍부한 실습 예제를 통해 깊이 있는 학습 경험을 제공합니다. 또한 다음과 같은 4가지 주요 기술을 통해 이론과 실습을 겸비하며 실력 있는 리액트 개발자로 성장할 수 있도록 돕습니다.

_[1대장] 리액트 컴포넌트 및 훅
웹 UI를 효율적으로 구축하는 라이브러리인 리액트와 재사용 가능한 컴포넌트를 배웁니다. useState, useEffect 등 다양한 훅을 활용하여 상태 관리, 생명주기 제어, 성능 최적화 등 현대 리액트 개발의 핵심 역량을 키울 수 있습니다.

_[2대장] 라우팅 (Routing)
react-router-dom 라이브러리를 활용하여 SPASingle Page Application에서 여러 페이지를 가진 것처럼 경로를 관리하고 화면을 전환하는 방법을 배웁니다. 이를 통해 URL 관리, 브라우저 이력 기능 등 실제 웹 애플리케이션에 필수적인 사용자 경험을 제공할 수 있습니다.

_[3대장] 전역 상태 관리 라이브러리
복잡한 애플리케이션에서 여러 컴포넌트가 공유하는 데이터를 효율적으로 관리하기 위한 필수 기술입니다. 리덕스 툴킷(Redux Toolkit)과 주스탠드(Zustand)를 통해 상태를 중앙에서 체계적으로 다루는 방법을 익힐 수 있습니다.

_[4대장] 파이어베이스
파이어베이스는 구글에서 제공하는 서버리스 백엔드 서비스 플랫폼으로, 직접 서버를 구축할 필요 없이 데이터베이스, 실시간 통신, 파일 스토리지 등 강력한 백엔드 기능을 리액트 앱에 연동할 수 있습니다.

★ 디스코드 & 카톡방으로 QnA 제공합니다
★ 실습에 필요한 코드를 제공합니다
★ 보너스 PDF 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉도 드립니다
★ 실습 및 코드에 궁금한 점이 있다면, 깃허브 이슈란에 코멘트를 남겨보세요
리액트를 확실히 익힐 수 있게 챙겨드립니다. 학습을 하다 보면 혼자 고민하기보다는 누군가와 함께 이야기 나누고 싶을 때가 있습니다. 진도를 나가며 막히는 부분이나 더 깊이 있는 내용을 함께 연구하고 싶다면, 디스코드 & 오픈 카톡방 & 깃허브 이슈란에서 자유롭게 의견을 나눠보세요.

여러 언어를 현업에 오가며 사용하면, 가끔 문법이 헷갈릴 때가 있습니다. 그래서 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉를 무료 PDF로 제공합니다. 리액트에 필요한 거의 모든 것을 진심으로 제공합니다. 여러분의 레벨업을 응원합니다!

★ 이 책을 읽고 나면 얻어지는 놀라운 효과를 체험하세요!
이 책을 성실하게 학습하면 다음과 같이 7가지 핵심 역량을 얻게 됩니다.

_1. 웹의 기본 원리 및 최신 프론트엔드 환경 구축 능력 : 웹의 기본 원리를 이해하고, Node.js, VSCode, ESLint 등 최신 프론트엔드 개발 환경을 완벽하게 구축할 수 있습니다.

_2. 리액트 핵심 문법을 이용한 동적 UI 구현 능력 : 컴포넌트, JSX 문법, 프롭스, useState 훅을 활용하여 동적으로 변화하는 리액트 UI를 구성할 수 있습니다.

_3. 컴포넌트 간 상호작용 및 데이터 처리 능력 : 컴포넌트를 모듈화하고, 이벤트 핸들러 및 폼값 전송 기능을 구현하며 부모-자식 간 유연한 상호작용을 처리할 수 있습니다.

_4. 브라우저 렌더링 이해 및 성능 최적화 능력 : 브라우저 렌더링 과정을 이해하고, useMemo와 useCallback을 사용해 불필요한 연산과 함수 재생성을 방지하며 성능을 최적화할 수 있습니다.

_5. 라우팅 및 고급 상태 관리 구조 설계 능력 : react-router-dom으로 URL 라우팅을 구현하고, useReducer와 useContext를 활용해 복잡한 상태 로직 및 전역 상태 공유 구조를 설계할 수 있습니다.

_6. 전문적인 전역 상태 관리 및 고급 UX 기능 구현 능력 : 리덕스 툴킷 또는 주스탠드로 전문적인 전역 상태를 관리하며, useOptimistic 등 확장 훅으로 사용자 경험을 높이는 고급 기능을 구현할 수 있습니다.

_7. 실제 프로젝트 제작 및 배포 능력 (풀스택 경험) : 객체형 배열 게시판, REST API 연동 게시판, Firebase를 활용한 실시간 앱을 제작하고 최종적으로 GitHub Pages에 배포할 수 있습니다.

인물정보

저자(글) 성낙현

월드컵으로 뜨거웠던 2002년에 웹개발을 시작한 후 다양한 웹 사이트와 모바일 앱을 개발했습니다. 최근 10년은 여러 교육기관에서 자바웹, 풀스택, 빅데이터, 클라우드, AI 등을 강의하고 있습니다. 저서로는 출간 후 약 7천여 권이 판매된 스테디셀러 《Must Have 성낙현의 JSP 자바 웹 프로그래밍》(1판)(2판)이 있습니다.

- 내 코드를 부탁해(디스코드) discord.com/invite/BYRpaDrfbH
- 내 코드를 부탁해(카톡방) open.kakao.com/o/ggK7EAJh
- 리액트(카톡방) open.kakao.com/o/gZtC4ASh

작가의 말

환영합니다. 리액트를 잘하고 싶은데 어떻게 할지 모르겠는 분이라면, 잘 찾아오셨습니다. 이 책은 리액트 학습 전에 필요한 웹의 기본 원리부터 최신 리액트 훅까지 체계적으로 안내하여 탄탄한 기초 지식을 제공합니다. 총 40개 이상의 다채로운 실전 프로젝트와 풍부한 실습 예제를 통해 이론을 실무에 바로 적용하며 문제 해결 능력을 키울 수 있습니다. 또한 리덕스 툴킷, 주스탠드, 파이어베이스 등 현대 웹 개발에 필수적인 기술들을 함께 익혀 완성도 높은 리액트 애플리케이션 개발자로 성장하도록 돕습니다.

이 책은 리액트 코드를 작성하기 전에, 프론트엔드 개발자로서 반드시 알아야 할 웹의 기본 원리와 핵심 개념부터 충실하게 설명합니다. 클라이언트와 서버의 동작 방식, HTML/CSS/JS의 역할, 브라우저 렌더링 과정, SPA, CSR, SSR, SSG와 같은 핵심 개념 등을 먼저 학습하여, 원리 중심의 튼튼한 기반을 다질 수 있게 합니다. 이러한 배경지식은 실무에서 문제의 원인을 더 빨리 찾고, 더 효율적이고 안정적인 웹사이트를 만드는 데 밑거름이 됩니다.

리액트는 문법도 중요하지만 개념이 중요합니다. 핵심 개념은 ‘상태’, ‘상태 관리’입니다. 그래서 전역 상태 관리에 활용하는 리덕스 툴킷과 주스탠드를 모두 다루고, 별도의 백엔드 없이도 데이터베이스와 스토리지를 구현할 수 있는 파이어베이스 연동까지 학습합니다. 이를 통해 단순 UI 개발을 넘어, 실제 서비스에 가까운 완성도 높은 애플리케이션을 직접 구축하며 리액트 생태계 전반에 대한 이해를 넓힐 수 있습니다.

최종적으로는 직접 만든 앱을 깃허브 페이지에 배포하는 과정까지 다루어, 개발부터 실제 서비스 공개까지의 전체 흐름을 경험하게 설계했습니다.

독자 여러분의 어려움을 풀어주고자 온라인에서 질문과 답변을 할 수 있는 채널을 마련해두었습니다. 〈리액트를 위한 자바스크립트 핵심 문법 익히기〉도 무료 PDF로 제공합니다. 이 책이 실력 있는 프론트엔드 개발자로 성장하는 발판이 되길 희망합니다.