[React] React 공부 시작하기 (feat. React의 정의)

새로운 프로젝트에서 프론트엔드 기술 스택으로 React를 사용하게 되어 공부를 시작하게 됐다.

공부 방법으로 유튜브 강의, 인프런 강의, 책 등을 고민했지만, 가장 기본이 되는 공식 문서부터 정독하기로 결정!
단순히 읽는 것보다는 블로그에 정리하면서 공부하는 게 더 도움이 될 것 같아 기록을 시작한다.

 

React를 처음 공부하는 입장에서 중요한 것 같은 개념과 나의 학습 과정을 정리할 것 !
이 글이 React를 공부하는 다른 사람에게도 도움이 되길 …! 🚀

 

📌 참고 자료:

• React 공식 문서
• React GitHub

리액트를 공부하기 전에 "React가 정확히 무엇인지" 먼저 알고 싶어서 공식 사이트를 탐색했는데,
의외로 react.dev에서는 기본 정의를 찾을 수 없었다. 

결국 GitHub README.md에서 React의 정의를 발견! 🎉

🔹 React란 ?

리액트는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리

---

🔹 React의 3가지 핵심 특징은 ?

1. 선언적 (Declarative)

2. 컴포넌트 기반 (Component-Based)

3. 한 번 배우면 어디서나 사용 가능 (Learn Once, Wrtie Anywhere)

 

✅ (1) 선언적 (Declarative)

"리액트는 인터렉티브 UI를 쉽게 만들 수 있게 한다."

=> 여기서 인터렉티브 UI(상호작용이 가능한 UI)는 사용자의 입력(클릭, 입력, 스크롤 등)에 따라 화면이 즉시 반응하는 UI를 의미한다.

"애플리케이션의 각 상태에 대한 간단한 UI를 디자인하면, 리액트가 데이터 변경 시 효율적으로 필요한 부분만 업데이트하고 렌더링을 한다."

 

✔ 리액트는 "어떻게 업데이트할지"가 아니라, "어떤 UI를 보여줄지"를 선언적으로 작성하는 방식

✔ 상태가 변경되면 리액트가 자동으로 필요한 부분만 업데이트(최적화)

✔ 선언적인 코드이기 때문에 코드가 예측 가능해 디버깅이 쉽다.

 

✅ (2) 컴포넌트 기반 (Component-Based)

"자신만의 상태를 관리하는 독립적인 컴포넌트를 만들고, 이를 조합해서 복잡한 UI를 구성할 수 있다."

"컴포넌트 로직이 템플릿이 아닌 자바스크립트로 작성되므로, 데이터를 쉽게 전달할 수 있고 상태를 돔에서 분리할 수 있다."

 

✔ 리액트는 컴포넌트 단위로 UI를 만들고 조합하는 방식

✔ 컴포넌트마다 자기만의 상태를 가질 수 있다.

✔ 재사용 가능한 UI를 만들 수 있어서 유지보수가 쉽다

 

✅ (3) 한 번 배우면 어디서나 사용 가능 (Learn Once, Write Anywhere)

"리액트는 특정 기술 스택을 강요하지 않으므로, 기존 코드를 변경하지 않고도 새로운 기능을 개발할 수 있다."

"리액트는 Node.js를 사용하여 서버에서도 렌더링할 수 있으며, React Native를 사용하여 모바일 앱을 만들 수도 있다."

 

✔ 리액트는 특정 프레임워크나 기술에 종속되지 않음

✔ 리액트를 배운 후 웹, 서버, 모바일 어디서든 활용 가능

✔ 서버에서 리액트를 사용하려면 Next.js 같은 프레임워크 사용 가능

✔ 모바일 앱을 만들려면 React Native 사용 가능

---

📌 학습 순서

 

1️⃣ React 공식 문서 (React.dev)

📌 공부해야 할 주요 개념:
✔ 컴포넌트 & Props (재사용 가능한 UI)
✔ State & 이벤트 처리 (데이터 변경 & UI 반응)
✔ useState, useEffect 등 React Hooks (기본적인 상태 관리)
✔ React Router (클라이언트 사이드 라우팅 개념)
✔ Context API (전역 상태 관리)

👉 React 공식 문서: https://react.dev/

React

 

2️⃣ Next.js 공식 문서 (Next.js.org)

📌 React를 익힌 후 Next.js에서 추가적으로 공부할 개념:
✔ App Router vs Pages Router (라우팅 방식)
✔ 서버 컴포넌트 & 클라이언트 컴포넌트 차이
✔ Next.js에서의 API Routes
✔ SSR(서버 사이드 렌더링) & SSG(정적 생성)
✔ 이미지 최적화 & 폰트 최적화 (next/image, next/font)

👉 Next.js 공식 문서: https://nextjs.org/docs

Introduction | Next.js