[React] 공부 기록 #1 - React란 무엇인가? 그리고 왜 배워야 할까?

안녕하세요! 😊

 

오늘부터 본격적으로 React 공부를 시작하려고 합니다.

 

React를 배우기 전에 기초 개념을 확실히 다지고, 공부한 내용을 기록하면서 정리하면

나중에 복습할 때도 도움이 되고, 같은 길을 걷는 분들에게도 작은 도움이 될 것 같아요. 💪

 

이번 첫 번째 글에서는 React의 특징과 장점, 그리고 다른 프론트엔드 프레임워크와 비교하여 왜 React를 배워야 하는지에 대해 정리해볼게요.

---

📌 React란?

 

React는 Facebook(현재 Meta) 에서 개발한 JavaScript 기반의 프론트엔드 라이브러리예요.

쉽게 말해, React는 동적인 UI를 빠르고 효율적으로 만들 수 있도록 도와주는 도구라고 할 수 있어요.

특히, 컴포넌트 기반 개발 방식을 통해 코드 재사용성을 높이고 유지보수를 쉽게 할 수 있다는 점이 큰 특징이에요.

 

 

✔️ 컴포넌트 기반 개발 → UI를 작은 단위로 나누어 재사용 가능

✔️ Virtual DOM → 실제 DOM을 직접 수정하지 않고 성능 최적화

✔️ 단방향 데이터 흐름 → 데이터의 흐름을 예측 가능하게 관리

✔️ 광범위한 생태계 → 다양한 라이브러리와 호환성 우수

---

📌 React vs 다른 프론트엔드 프레임워크 비교

	React	Vue.js	Angular
개발사	Meta (Facebook)	Evan You (개인 개발자)	Google
구조	라이브러리 (필요한 기능을 추가하며 사용)	프레임워크 (상대적으로 가볍고 유연함)	프레임워크 (강력하지만 복잡함)
사용법	JSX 문법 사용	템플릿 기반	TypeScript 사용
러닝 커브	쉬움 (JSX 학습 필요)	매우 쉬움	어려움 (타입스크립트 + 복잡한 구조)
규모	중·대형 프로젝트에 적합	소형·중형 프로젝트에 적합	대형 프로젝트에 적합
성능	Virtual DOM으로 빠름	Virtual DOM으로 빠름	직접 DOM을 조작하여 다소 무거움
생태계	가장 넓고 활발함	비교적 작음	기업용 솔루션에서 많이 사용

---

📌 React를 선택해야 하는 이유는?

 

1️⃣ 유연성 → React는 프레임워크가 아닌 라이브러리이기 때문에, 필요한 기능을 자유롭게 추가하여 사용할 수 있어요.

2️⃣ 빠른 렌더링 → Virtual DOM을 사용하여 실제 DOM 변경을 최소화해 최적의 성능을 유지해요.

3️⃣ 재사용성 높은 컴포넌트 → 컴포넌트 기반 개발 방식으로 코드 재사용과 유지보수가 편리해요.

4️⃣ 폭넓은 커뮤니티 & 생태계 → 다양한 라이브러리와 도구가 지원되며, 개발자 커뮤니티가 매우 활발해요.

5️⃣ 대기업 및 인기 서비스에서 사용 → Facebook, Instagram, Airbnb, Netflix 등 유명 기업에서도 사용하고 있어요!

---

📌 학습 목표

 

✔️ React의 핵심 개념을 이해하기

✔️ React와 다른 프레임워크의 차이점 알아보기

✔️ 공식 문서를 활용하는 방법 익히기

---

🔹 실습을 위한 준비: VS Code 설치 방법

 

React 개발을 위해서는 VS Code (Visual Studio Code) 에디터가 필요해요!

아래 단계를 따라 다운로드 후 설치해 주세요. 😊

 

1️⃣ VS Code 다운로드

 

🔗 VS Code 공식 사이트 로 이동

🔹 운영 체제에 맞는 버전 다운로드

• macOS → .zip 파일 다운로드 후 압축 해제

• Windows → .exe 파일 다운로드 후 설치 실행

• Linux → .deb 또는 .rpm 파일 다운로드 후 설치

 

2️⃣ VS Code 설치 및 실행

 

✅ 설치 완료 후 VS Code를 실행합니다.

✅ 첫 실행 시 원하는 테마를 설정할 수 있어요.

 

3️⃣ React 개발을 위한 필수 확장 프로그램

 

VS Code 왼쪽 확장 탭(🔌 아이콘)에서 아래 확장 프로그램을 검색 후 설치하면 더욱 편리해요!

 

🔹 ES7+ React/Redux/React-Native snippets → 빠른 코드 자동완성

🔹 Prettier - Code formatter → 코드 자동 정렬 및 가독성 향상

🔹 Live Server → HTML 파일을 실시간으로 브라우저에서 확인 가능

---

🔗 React 공식 문서 (한글) → 빠르게 시작하기

 

React는 공식 문서가 정말 잘 되어 있어서, 문서를 참고하며 공부하길 추천해요!

위 링크에서 React 공식 문서를 한글로 볼 수 있으니, 함께 참고하면서 공부하면 더 쉽게 이해할 수 있을 거예요. 😉

 

이제 본격적으로 React의 기본 개념을 익혀볼까요? 🚀✨

다음 글에서는 간단한 웹사이트를 직접 만들어보는 실습을 진행할 예정이니 기대해 주세요! 😆