2주차 (8.26, 8.28) - React 동작 원리 & 컴포넌트
1. React 동작 원리
•
React는 Virtual DOM(가상 DOM) 을 사용해 실제 DOM 조작을 최소화 → 성능 최적화
•
프로젝트 구조:
◦
Vite 기반 프로젝트
◦
main.tsx에서 ReactDOM이 root 엘리먼트에 컴포넌트 렌더링
•
핵심 흐름:
1.
State 변경
2.
Virtual DOM 비교 (Diffing)
3.
실제 DOM 업데이트
2. JSX 작성 규칙
1.
여러 줄 return → 소괄호( ) 로 감싸기
2.
최상위 태그 하나만 존재해야 함
3.
모든 태그는 닫기 필수
4.
{ } 안에서는 JS 표현식 사용 가능
(주석은 /* ... */)
5.
속성명은 카멜 케이스 (className, onClick 등)
6.
인라인 스타일 → 객체 형태
<div style={{ color: "white" }}>Hello!</div>
JavaScript
복사
3. Component (컴포넌트)
1) Class Component - props 사용
•
외부에서 전달받은 값을 props를 통해 사용
•
this.props.속성이름 또는 비구조화 할당으로 접근 가능
<ClassComponent href="http://twitter.com" text="Go to Twitter" />
TypeScript
복사
2) key 속성
•
리스트 렌더링 시 고유한 key 값 필수
•
map 메서드 활용 시 id 또는 index 사용
{items.map((text, i) => <p key={i}>{text}</p>)}
TypeScript
복사
3) children 속성
•
모든 컴포넌트는 children 속성을 가짐 (타입: ReactNode)
•
<img>, <input> 같은 태그는 children 불가
•
장점:
◦
범용 컨테이너 컴포넌트 설계 가능
◦
내부에 다양한 콘텐츠를 유연하게 전달 가능
props vs children
•
props: 미리 속성 정의 필요 → 제한적
•
children: 내부 구조 자유롭게 전달 가능 → 유연