| slug | / |
|---|
본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사��되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있다는 전제하에 진행됩니다.
이 튜토리얼의 이름은 왜 "모던 리액트" 일까요? 사실, 개발 관련 튜토리얼에서 "모던함"을 오랫동안 유지하는 것이 솔직히 어렵기 떄문에, "모던" 이라는 키워드를 붙이는게 조금 조심스럽기도 합니다. 이 강의는 2019년에 처음 작성되었고, 2026년에 최신 리액트 생태계 기준으로 다시 다듬어진, "모던"한 강의 입니다. 리액트는 2013년에 처음 릴리즈되었는데요, 근 몇년동안, 리액트 개발팀에서는 어떻게 하면 리액트 개발자들이 더 편하게 개발을 할 수 있을까? 라는 고민을 열심히 하면서 계속해서 리액트 개발 방식이 조금씩 바뀌고 있습니다.
리액트 개발 생태계에서 2019년에 찾아온 큰 변화는 도태된 클래스형 컴포넌트와 Hooks 을 사용하여 부흥한 함수형 컴포넌트라고 생각합니다. 이 강의는 이 트렌드에 맞춰서 준비되었습니다.
몇년이 지나면, 어쩌면 이 강의는 더 이상 "모던"해지지 않을 것 입니다. 하지만 적어도 여러분이 글을 읽고 있는 지금 시점에서는 이 강의는 "모던"한 강의입니다.
시간이 지났는데 제가 이 강의를 업데이트하지 않게 된다면 모던이라는 키워드를 빼겠습니다 :)
이 튜토리얼은 2026년에 최신 리액트(v18/v19) 생태계에 맞춰 갱신되고 있습니다. 1장(basic/)부터 다음 기준으로 반영되었으며, 다른 장도 같은 기준으로 순차적으로 진행됩니다. (자세한 배경과 작업 규약은 MODERNIZATION-PLAN.md 를 참고하세요.)
- JavaScript / TypeScript 병기: 리액트 코드 예제는 JavaScript 버전과 TypeScript 버전을 나���히 제공합니다. TypeScript 버전은 로직은 동일하고 타입만 추가한 형태이므로, 편한 언어를 골라서 따라오시면 됩니다.
- create-react-app 대신 Vite: create-react-app 은 2025년에 공식적으로 지원이 종료되었기 때문에, 프로젝트 생성은 Vite(
npm create vite@latest) 기준으로 설명합니다. 개발 서버 주소는http://localhost:5173, 엔트리 파일은src/main.jsx(TS:main.tsx) 입니다. - React 18/19 기준 코드:
ReactDOM.render대신createRoot, JSX 만을 위한import React제거,defaultProps대신 기본 매개변수 등 최신 API 기준으로 코드를 작성합니다. 개발 모드에서는<StrictMode>때문에 컴포넌트 렌더링과console.log가 두 번 실행되는데, 이는 정상 동작이며 버그가 아닙니다. - React Compiler 참고 내용: useMemo, useCallback, React.memo 챕터 끝에는 2025년 정식 출시된 React Compiler 와의 관계를 정리한 참고 박스가 있습니다. 컴파일러가 메모이제이션을 자동화해주지만, 그 원리를 이해하는 것은 여전히 중요합니다.
- 클래스 컴포넌트 챕터: 삭제하지 않고, 기존 코드를 읽기 위한 참고용으로 남겨두었습니다. 에러 바운더리(
componentDidCatch)는 아직 클래스로만 만들 수 있는 유일한 실전 사례입니다. - 스크린샷: 일부 스크린샷은 이전 버전 기준이라 실제 화면과 다를 수 있습니다. 본문 텍스트를 우선으로 따라가 주세요.
이 문서 사이트는 Docusaurus 로 빌드됩니다. 로컬에서 보려면 Node.js 20+ 환경에서 pnpm install && pnpm start 를 실행하세요.
이 강의는 JavaScript 의 기초를 알고 있어야 원활하게 진행 할 수 있으니, 만약 JavaScript 를 잘 모르신다면, 벨로퍼트와 함께하는 모던 자바스크립트 튜토리얼을 먼저 학습해주세요. 이 강의는 리액트를 한번도 사용해보지 않으신분들을 대상으로 만들어졌으며, 강의 후반부로 갈수록 심화 과정을 다루게 되기 때문에 리액트의 기초를 이미 어느정도 알고 계신 분들께도 도움이 됩니다.