<코딩 자율학습 리액트 프런트엔드 개발 입문> 책 리뷰

 

 

 

 

 

최근에 협찬받은 『코딩 자율학습 리액트 프런트엔드 개발 입문』을 읽고 있습니다. 아직 완독은 못 했지만, 1~4장을 읽으면서 신입 개발자로서 느낀 혼란과 작은 깨달음을 정리해 보았습니다. 저처럼 리액트를 처음 접하는 분들에게 조금이나마 도움이 되었으면 합니다.

 

---

1. 리액트 시작하기

사람들이 리액트를 선택하는 이유

리액트는 현대 프런트엔드 개발에서 사실상 표준으로 자리 잡은 라이브러리입니다. 선택받는 이유는 다음과 같습니다.

• 컴포넌트 기반 아키텍처: UI를 재사용 가능한 독립적인 단위로 나누어 개발할 수 있습니다.
• 선언형 프로그래밍: 상태 변화에 따라 UI가 어떻게 보여야 하는지만 정의하면 됩니다.
• 가상 DOM: 실제 DOM 조작을 최소화하여 성능을 최적화합니다.
• 풍부한 생태계: 다양한 라이브러리와 도구들이 잘 갖추어져 있어 확장이 쉽습니다.

 

---

 

2. Vite로 프로젝트 생성 - 직접 체감한 속도 차이

책에서 Vite를 권장하는 이유를 읽으면서, 예전에 CRA에서 Vite로 마이그레이션했던 경험이 떠올랐습니다. 당시 정말 극적인 속도 차이를 체감했었거든요.

CRA vs Vite 빌드 시간 비교 – CRA는 느리지만 Vite는 빠르게 종료됨

 

실제로 측정해본 결과

- CRA: npm run build 완료까지 약 45초

- Vite: 같은 프로젝트가 12초만에 완료

 

하지만 더 인상적이었던 건 개발 중 HMR 반응성이었어요. CRA에서는 파일 저장 후 브라우저에 반영되기까지 2-3초 정도 기다려야 했는데, Vite는 정말 저장하자마자 즉시 반영되더라고요. 이 차이가 하루 종일 개발할 때는 엄청난 생산성 차이로 느껴졌습니다.

 

책을 읽으면서 "아, 이래서 요즘 다들 Vite를 쓰는구나" 하고 다시 한번 납득이 갔어요.

 

 

Vite를 선택하는 이유 

최근에는 Create React App(CRA) 대신 Vite를 사용하는 것이 권장되는 추세입니다. 주요 이유는 다음과 같습니다.

• 빠른 빌드 속도: 번들링 과정이 최적화되어 CRA보다 훨씬 빠릅니다.
• Hot Module Replacement(HMR) 지원: 코드 수정 시 브라우저가 즉시 반영되어 개발 효율이 높습니다.
• 최신 ES 모듈 기반: 구식 도구 대신 현대적인 개발 환경을 제공합니다.

 

 

CRA 권고 중단과 Vite 대세의 배경

한때 CRA는 리액트 초보자들이 가장 쉽게 프로젝트를 시작할 수 있는 기본 도구였습니다. 하지만 몇 가지 한계가 있었습니다.

• 느린 빌드와 실행 속도: 큰 규모의 프로젝트에서 성능 저하가 두드러졌습니다.
• 환경 설정 제약: Webpack 설정을 깊게 커스터마이징하기 어려웠습니다.
• 메인터넌스 문제: 2022년 이후 CRA의 유지보수가 더뎌지고, React 공식 문서에서도 다른 대안을 권장하기 시작했습니다.

 

이런 배경 속에서 Vite가 부상했습니다. Vite는 ESBuild와 Rollup 기반의 경량 번들러를 사용해 CRA의 성능 한계를 해결했고, 플러그인 생태계도 빠르게 성장하면서 사실상 새로운 표준으로 자리 잡았습니다. 지금은 리액트 입문부터 실무 프로젝트까지 Vite가 기본 선택지로 여겨지고 있습니다.

 

---

 

 

3. 책에서 좋았던 부분

책이 단순히 기초 문법만 다루는 게 아니라, React 19에서 달라진 점까지 알려준 게 특히 좋았습니다. 예를 들어, 이전 버전에서는 ref를 props로 직접 전달할 수 없었는데, React 19부터는 가능해졌다는 점을 다뤄주더라고요.

// 이전 방식 (forwardRef 필요)
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

// React 19 (직접 전달 가능)
const MyInput = ({ ref, ...props }) => {
  return <input ref={ref} />;
};

 

 

아직 실무에서 React 19를 써본 건 아니지만, 이런 설명 덕분에 앞으로 어떤 부분이 바뀌고, 내가 어디에 집중해야 할지 감을 잡을 수 있었습니다.

---

 

4. 이 책의 장점 

앞부분만 읽었지만, 이 책이 다른 입문서와 달리 좋다고 느낀 점들을 정리해 보았습니다.

 

• 최신 트렌드 반영: 단순히 기본 개념에 머무르지 않고, React 19 변경점까지 다뤄 주어 입문자도 앞으로의 방향성을 알 수 있습니다.
• 실습 중심 구성: 개념을 설명하자마자 바로 따라 할 수 있는 예제가 있어서, 이론을 “읽고 끝”이 아니라 “직접 손으로 확인”하게 해줍니다.
• 부담 없는 난이도: 꼭 필요한 개념만 추려서 설명하기 때문에 진입 장벽이 낮고, 초보자도 길을 잃지 않게 도와줍니다.
• 신입 개발자 친화적 설명: 실무 용어에 압도되지 않도록, “왜 중요한가”에 집중해서 풀어줘 이해가 잘 됩니다.

덕분에 단순히 기술을 배우는 게 아니라, “아, 이렇게 공부하면 되는구나”라는 감각까지 얻을 수 있었습니다.

 

---

 

5. 배우면서 생긴 작은 깨달음

책을 따라가며 정리하다 보니, “아, 이래서 리액트가 이렇게 구성되어 있구나”라는 이해가 조금씩 생겼습니다.

• 컴포넌트를 작은 단위로 나누면 상태 관리가 훨씬 직관적이라는 점
• JSX 문법은 처음엔 생소하지만, JavaScript와 자연스럽게 연결된다는 점
• Vite 같은 최신 도구를 사용하면 개발 속도가 훨씬 빨라진다는 점

취준생이라 부족한 점이 많지만, 정리와 실습을 반복하면서 점점 자신감을 쌓아가고 있습니다. 앞으로는 작은 예제부터 직접 만들어 보고, 프로젝트에 적용하면서 기초를 단단히 다지고 싶습니다.

 

---

 

6. 앞으로의 계획

아직 5장 이후는 읽지 못했지만, 상태 관리와 훅(Hooks)에 대한 내용이 나올 예정이라 기대가 됩니다. 다음 글에서는 5~7장을 읽고 새롭게 배운 점과, 직접 코드로 따라 해보며 느낀 부분을 정리할 계획입니다. 

 

예를 들어, 작은 투두 리스트, 블로그 프로젝트를 만들어 useState, useEffect, useContext를 적용해 보면서 이해도를 높이려고 합니다. 완벽한 정리를 목표로 하기보다는, 배우는 과정에서의 기록을 남기며 저처럼 시작하는 분들과 함께 성장해 나가고 싶습니다. 🚀