✅ React 기초 강좌

🎯 학습 목표

• React의 정의, 목적, 핵심 개념을 원론적으로 이해한다.
• 기존 방식과 React 방식의 차이를 비교해본다.
• React를 왜 사용하는지, 어떤 상황에 적합한지 판단할 수 있다.

📌 1. React의 정의

React는 Facebook(현 Meta)이 만든 사용자 인터페이스(User Interface)를 구축하기 위한 JavaScript 라이브러리입니다.

• UI를 선언적으로(descriptive) 작성할 수 있도록 돕는다.
• 컴포넌트 기반으로 UI를 구성한다.
• View 중심이며, 다른 기능은 별도의 라이브러리로 확장 가능하다.

🔍 React는 MVC 중 View에 해당하는 역할만 수행합니다.

📌 2. 왜 React가 등장했을까?

전통적인 웹 개발 방식의 한계

• DOM 직접 조작은 복잡하고 오류가 많음
• 데이터와 화면 상태가 따로 놀아 UI 상태 관리가 어려움
• 규모가 커질수록 유지보수성이 떨어짐

React의 해결 방식

• Virtual DOM을 통한 성능 최적화
• 데이터 변화에 따라 UI가 자동으로 다시 렌더링
• UI를 컴포넌트 단위로 나누어 설계 → 재사용성, 테스트 용이성 향상

📌 3. React의 주요 특징

🧠 4. SPA(Single Page Application)란?

SPA는 한 번 페이지를 불러오고, 이후에는 필요한 데이터만 가져와서 갱신하는 방식입니다.

전통적인 MPA 방식 vs SPA

💡 5. React vs 다른 프레임워크

✍️ 6. 심화

1. React는 프레임워크일까요, 라이브러리일까요? 그 이유는?

React는 라이브러리입니다.

그 이유는, 애플리케이션의 전체 아키텍처를 강제하지 않고 UI(View)만을 다루기 때문입니다. 반면 Angular는 라우팅, 상태관리, 폼 등 전체 기능을 포괄하기 때문에 프레임워크입니다.

단, React 생태계는 다른 라이브러리들과 조합해 프레임워크처럼 사용할 수 있습니다.

2. Virtual DOM이란 무엇이며, 어떤 역할을 하나요?

Virtual DOM은 실제 DOM의 메모리 상 가벼운 사본입니다.

React는 상태 변화가 생기면 Virtual DOM을 먼저 변경하고, 이전 Virtual DOM과 비교(diff)하여 **변화된 부분만 실제 DOM에 반영(patch)**합니다.

이 방식은 전체 DOM을 직접 조작하는 것보다 훨씬 성능이 뛰어나며, 반응성이 좋습니다.

3. SPA 방식의 장점은 무엇인가요?

빠른 사용자 경험(UX): 전체 페이지를 다시 불러올 필요 없이 빠르게 전환됨클라이언트 중심 렌더링: 서버에 과도한 요청을 하지 않음앱처럼 부드러운 화면 전환: 모바일 앱과 유사한 경험 제공 → 반면 SEO 대응은 별도 처리가 필요 (React에서는 Next.js 같은 프레임워크로 해결 가능)

✅ 요약