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

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

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

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

★ 풍부한 그림과 도표 + 연습문제 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에 배포할 수 있습니다.


작가의 말

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

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

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

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

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