[React 공식문서 vol.0] 공식문서로 리액트 기본 다지기

리액트를 공부하려고 마음먹었다면, 아마 가장 먼저 고민하게 되는 질문이 있습니다.

 

 

"뭐부터 공부해야 하지?" 혹은 "책을 볼까, 영상 강의를 볼까?"

 

 

 

솔직히 말해서, 저는 리액트를 제대로 공부하고 싶다면 공식문서보다 좋은 자료는 없다고 생각합니다.
왜냐하면 공식문서 안에는 리액트 기초부터 고급 문법까지, 핵심 개념과 실습 예제가 모두 담겨 있기 때문입니다.

게다가 이 문서는 리액트를 직접 개발한 사람들이 작성한 공식문서입니다.
즉, 누구보다 정확하고 믿을 수 있는 정보가 담겨 있으며, 최신 버전 React에 맞춰 항상 업데이트됩니다.
책이나 영상 강의는 출간 시점 이후 최신 내용이 반영되지 않을 수 있지만, 공식문서는 실시간으로 최신 정보가 반영됩니다.

 

 

저 역시 이미 4년 넘게 리액트를 사용했지만, 이번에 새롭게 버전업한 React가 어떤 새로운 기능과 개선 사항을 담고 있는지,
그리고 제가 알고 있는 지식이 여전히 정확한지 짚어보는 시간을 갖고 싶었습니다.

 

이런 이유로 이번 시리즈에서는 공식문서를 한 챕터씩 정주행하며, 리액트 기본을 다시 다지는 과정을 기록하려고 합니다.

 

공식문서를 읽는 목적

 

첫 번째 목표는 단순히 읽는 것이 아니라 이해하고, 직접 코드를 작성하며 내 것으로 만드는 것입니다.
JSX 문법, 컴포넌트 구조 같은 기본 개념부터 시작해, Hooks, Context API, Suspense 등 고급 주제까지 차근차근 학습할 예정입니다.

작은 컴포넌트를 직접 만들어보며 실습하면, 단순히 읽는 것보다 기억에 오래 남고 이해가 깊어집니다.
공식문서의 예제 코드는 실제로 동작하도록 작성되어 있어, 복사해서 내 프로젝트에 적용하거나 조금 변형해 나만의 코드로 만들 수 있습니다.

또한 공식문서를 정주행하면 리액트의 철학과 설계 의도를 자연스럽게 이해하게 됩니다.
그냥 사용법만 아는 개발자와, 왜 이런 방식으로 만들어졌는지 이해하는 개발자는 문제를 해결할 때 큰 차이가 납니다.

 

 

시리즈 진행 방식

이 시리즈에서는 매 포스트마다 한 챕터씩 정리하면서, 제가 직접 코드를 작성해보고 느낀 점도 함께 기록하려고 해요.

 

그래서 혼자 공부하는 분이나, 이제 막 리액트를 배우기 시작한 분도 같이 따라올 수 있도록 쉽게 따라갈 수 있는 구성으로 만들었습니다.

 

 

중요한 건 속도가 아니라 이해의 깊이예요.

 

 

하루에 조금씩 읽고, 코드를 작성하고, 다시 돌아보는 과정을 반복하다 보면 리액트의 기초부터 고급 개념까지 자연스럽게 내 것이 된답니다.

시리즈가 끝나갈 즈음에는, 공식문서를 읽는 게 얼마나 큰 힘이 되는지 직접 느낄 수 있을 거예요.

 

그리고 혼자서도 충분히 리액트 프로젝트를 설계하고 구현할 자신감이 생기실 거예요.

 

---

 

 

리액트 공식문서를 검색하면 두개가 있는데 필요하신 버전에 맞게 공부하시면 될 것같습니다.

현재 리액트는 v19 까지 나왔습니다.

 

구 React 공식문서

https://ko.legacy.reactjs.org/docs/getting-started.html

시작하기 – React

 

 

신 React 공식문서

https://react.dev/

React

 

 

리액트 버전별 비교: 주요 변화와 특징

1. React 15 이전

• 주요 특징: 클래스 컴포넌트 중심, JSX 문법 기본, 가상 DOM 개념 도입
• 주의점: 함수형 컴포넌트는 단순한 렌더링용, 상태 관리 불가

2. React 16

• 주요 특징: Fiber 아키텍처 도입 → 렌더링 성능 개선
• 주요 추가 기능: Error Boundaries, Fragments, Portals
• Hooks 전 단계: 상태와 사이드 이펙트는 여전히 클래스 컴포넌트에 의존

3. React 16.8

• 주요 특징: Hooks 도입 → 함수형 컴포넌트에서도 상태 관리와 생명주기 사용 가능
• 주요 Hooks: useState, useEffect, useContext

4. React 17

• 주요 특징: 주로 내부적인 변화, 점진적 업그레이드 용이
• 주의점: 새로운 기능 추가보다는 호환성과 마이그레이션 편의성 강화

5. React 18

• 주요 특징: Concurrent Mode 도입, 자동 배치(Batched Updates), Suspense 개선
• 주의점: 기존 프로젝트 업그레이드 시 일부 렌더링 방식 차이 확인 필요

 

 

 

함수형 컴포넌트 vs 클래스형 컴포넌트

리액트 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지가 있어요.
최근에는 함수형 컴포넌트가 주류지만, 차이를 이해하면 둘 다 활용할 수 있습니다.

구분클래스형 컴포넌트함수형 컴포넌트

 

문법	class 키워드 사용, extends React.Component	일반 함수 형태, function 혹은 화살표 함수
상태 관리	this.state, this.setState()	Hooks 사용 (useState, useReducer)
생명주기	componentDidMount, componentDidUpdate 등	Hooks 사용 (useEffect)
장점	과거 프로젝트와 호환성, 명시적 생명주기 관리	간결하고 직관적, 코드량 적음, 최신 React 패턴과 호환
단점	코드가 길고 복잡해지기 쉬움	Hooks 개념 학습 필요, 클래스형 경험 없으면 초기 혼란

 

핵심 포인트

• 함수형 컴포넌트는 최근 리액트에서 권장되는 방식입니다.
• 클래스형 컴포넌트는 레거시 코드 유지나 일부 라이브러리 호환에서 여전히 필요할 때가 있어요.
• Hooks를 활용하면 함수형에서도 상태 관리와 생명주기 기능을 완전히 사용할 수 있습니다.

 

 

리액트를 공부하다 보면 한 번쯤은 클래스형 컴포넌트 vs 함수형 컴포넌트를 비교하게 됩니다.
클래스형은 과거 프로젝트에서 많이 쓰였고, 생명주기 메서드가 명시적으로 드러난다는 장점이 있어요.
하지만 요즘 리액트의 흐름은 명확히 함수형 컴포넌트 + Hooks 쪽으로 가고 있습니다.

 

 

함수형은 코드가 훨씬 간결하고 직관적이라서,
처음 배우는 분들에게도 이해하기 쉽고 유지보수하기도 좋아요.
무엇보다 리액트 공식문서에서 제시하는 최신 패턴도 모두 함수형 기준으로 설명되어 있죠.

그래서 이번 시리즈에서는 함수형 컴포넌트를 중심으로 공부를 이어가려고 합니다.

물론 필요하다면 클래스형도 함께 다루겠지만,
중요한 건 최신 리액트가 어디에 초점을 맞추고 있는지를 따라가는 거라고 생각해요.

 

 

이제 본격적으로 문서를 정주행하면서,
리액트의 기초부터 고급 주제까지 차근차근 살펴보고 직접 코드를 작성해보겠습니다.
끝까지 따라오신다면, 단순히 "리액트를 쓸 줄 아는 사람"이 아니라
"리액트를 이해하는 개발자"가 될 수 있을 거예요. 🚀