[React] 주요 기능들 + 용어

✅ React 프론트엔드 주요 개념/기능 정리

전문용어                              설명                                                                                              예시

 

Component (컴포넌트)	웹 페이지를 구성하는 UI 조각. 재사용 가능한 HTML+JS 묶음.	버튼, 카드, 리스트 등
JSX	HTML처럼 보이지만 JavaScript 안에서 쓰는 UI 언어.	<div>Hello</div>
Props (속성)	부모 → 자식 컴포넌트로 데이터 전달할 때 사용.	<Card title="제목" />
State (상태)	컴포넌트 안에서 변하는 데이터를 저장. UI도 함께 바뀜.	useState
Effect (부수효과)	화면에 그려지고 난 후에 데이터를 가져오거나 이벤트 등록	useEffect
Router	여러 화면을 가지는 웹앱에서 페이지 전환 처리	react-router-dom
Event Handling	클릭, 입력 같은 사용자 행동 처리	onClick, onChange
Form Handling	사용자가 입력한 값들을 처리하는 방식	useState로 값 저장 후 제출
Input Validation	폼에 입력한 데이터의 유효성 검사	이메일 형식 검사 등
Global State Management	여러 컴포넌트가 같이 쓰는 데이터 관리	Redux, Zustand, Context API
API 통신	서버에서 데이터를 가져오거나 저장하는 기능	fetch, axios
Custom Hook	자주 쓰는 useEffect, useState 조합을 재사용 가능한 함수로 만들기	useAuth(), useFetch()
Responsive Design	모바일, 태블릿, 데스크탑에서 UI가 알맞게 보여지게 만들기	미디어쿼리, Tailwind
UI Framework	빠르게 예쁜 UI를 만들 수 있는 컴포넌트 모음	Material UI, Tailwind, Chakra UI
Lazy Loading / Suspense	페이지 속도를 높이기 위해 필요할 때만 컴포넌트 불러오기	React.lazy, Suspense
Error Boundary	컴포넌트에서 오류가 나도 앱이 죽지 않고 에러를 잡아서 보여주는 기능	componentDidCatch
Authentication (인증)	로그인 상태 확인: 누가 요청했는지 파악	로그인 상태 체크
Authorization (권한)	로그인된 사용자가 무엇을 할 수 있는지 제한	관리자만 접근 허용 등

 

---

💡 전체 흐름 요약

React 앱은 "컴포넌트"라는 작은 블록을 조립해서 만든다.
그 안에는 사용자의 행동을 감지하고 (Event), 서버에서 데이터를 가져오고 (API), 로그인 여부를 확인하고 (Auth)
여러 화면을 왔다갔다 (Router) 하면서 하나의 웹앱이 된다.