리액트(React)는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리입니다. 주로 웹 프론트엔드 개발에서 사용돼요.
📌 리액트란?
Facebook(Meta)에서 개발
컴포넌트 기반 UI 라이브러리
SPA(Single Page Application) 구현에 최적화
🔧 리액트의 핵심 특징
1️⃣ 컴포넌트 기반
UI를 작은 부품(컴포넌트)으로 나눠서 관리
재사용성과 유지보수성 ↑
function Hello() {
return <h1>Hello React</h1>;
}
2️⃣ 가상 DOM (Virtual DOM)
실제 DOM을 직접 조작하지 않음
변경된 부분만 효율적으로 업데이트 → 성능 향상
3️⃣ 단방향 데이터 흐름
데이터가 한 방향으로만 흐름
버그 추적과 상태 관리가 쉬움
4️⃣ JSX 문법
JavaScript 안에서 HTML처럼 작성
const element = <p>안녕하세요</p>;
🌍 리액트로 만들 수 있는 것
웹 서비스 프론트엔드
관리자 페이지 (Admin)
대시보드
모바일 앱 (React Native)
⚙️ 리액트 생태계
상태관리: Redux, Recoil, Zustand
라우팅: React Router
프레임워크: Next.js (SEO, SSR 지원)
스타일링: CSS, Styled-components, Tailwind
⚖️ 장단점
✅ 장점
UI 재사용성 매우 높음
대규모 프로젝트에 적합
커뮤니티 & 자료 풍부
❌ 단점
초기 진입 장벽 (JS, ES6, 개념 필요)
설정이 복잡하게 느껴질 수 있음
🚀 이런 사람에게 추천
동적인 웹 UI를 만들고 싶은 사람
SPA, 대규모 프론트엔드 프로젝트
백엔드(PHP, Node, Python)와 분리된 구조를 원하는 경우
🔗 PHP와 리액트 관계 (간단 비교)
구분 PHP React
역할 서버(백엔드) 화면(UI, 프론트엔드)
실행 위치 서버 브라우저
주요 목적 데이터 처리 사용자 인터페이스
👉 보통 PHP + React 조합으로
PHP는 API 서버, React는 화면을 담당합니다.
