통합 요약노트
Ch.11 React 입문 — 컴포넌트 사고방식
React의 개념, JSX, 컴포넌트, Props, 리스트 렌더링
이 챕터의 내용
React란? — HTML을 넘어서
React — UI를 독립적인 컴포넌트로 쪼개서 조립하는 라이브러리입니다.
DOM을 직접 조작하면 코드가 금방 복잡해집니다
페이지 전체를 새로 불러오지 않고 필요한 부분만 바꿉니다
웹 페이지를 레고 블록처럼 독립적인 조각으로 쪼갭니다
- React = UI를 컴포넌트로 쪼개서 선언적으로 관리하는 라이브러리
- SPA = 페이지 전체가 아닌 필요한 부분만 동적으로 업데이트
- 컴포넌트 = 독립적이고 재사용 가능한 UI 조각
JSX와 첫 컴포넌트
JSX — JavaScript 안에서 HTML 구조를 직관적으로 작성하는 React의 핵심 문법입니다.
JSX는 JavaScript 안에서 HTML처럼 UI를 작성합니다
컴포넌트는 JSX를 반환하는 단순한 JavaScript 함수입니다
Props는 부모 컴포넌트에서 자식에게 전달하는 데이터입니다
- JSX = JavaScript 안에서 HTML처럼 UI를 작성하는 문법
- 컴포넌트 = JSX를 반환하는 함수, 대문자로 시작
- Props = 부모에서 자식으로 데이터를 전달하는 방법
리스트 렌더링과 조건부 표시
map()과 조건부 렌더링 — 데이터가 곧 UI가 되는 React의 선언적 방식입니다.
배열의 각 요소를 JSX로 변환하면 리스트 완성!
React에게 '이 요소가 어떤 것인지' 알려주는 신분증 = key
조건에 따라 다른 UI를 보여주는 3가지 패턴을 알아봅시다
- map()으로 배열 데이터를 JSX 리스트로 변환
- key = React가 각 요소를 식별하는 고유 값 (id 사용 권장)
- 조건부 렌더링: 삼항 연산자, && 연산자, early return
- React 입문 완료! 다음은 상태 관리로 살아 움직이는 UI를 만들어봅시다
핵심 용어 모음
빠른 전환
페이지 전체가 아닌 일부분만 업데이트하여 속도가 빠름
앱 같은 경험
모바일 앱처럼 부드러운 화면 전환
프론트/백 분리
프론트엔드와 백엔드를 독립적으로 개발 가능
코드 재사용
컴포넌트 단위로 UI를 재사용, 유지보수 용이
class → className
JSX에서 class는 JavaScript 예약어이므로 className 사용
for → htmlFor
<label>의 for 속성은 htmlFor로 변환
중괄호 {}
JavaScript 표현식을 JSX 안에 넣을 때 사용
하나의 루트 요소
여러 요소를 반환할 때 <div> 또는 <> 로 감싸야 함
삼항 연산자
A ? B : C — 조건에 따라 A 또는 B 중 하나를 렌더링
&& 연산자
조건 && <JSX> — 조건이 true일 때만 렌더링 (false면 아무것도 표시 안 함)
early return
if (!조건) return <대체 UI>; — 조건에 따라 완전히 다른 컴포넌트 반환
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기