1. 오늘 한 것 (What I Did)
- React 프로젝트 생성: [Vite] npm create vite@latest my-react-app -- --template react
- HTML 페이지("꾸준히 씁시다 클럽" OT 페이지)를 React JSX 컴포넌트로 변환
- 컴포넌트별 데이터 구조화 및 분리 작업
- 조건부 렌더링으로 동적 UI 그리기 → type에 따라 다른 화면 보여주는거
- Header, TimeTable, ClubIntroduction, MiniWorkshop, Declaration 컴포넌트 완성
2. 새로 이해한 것 (What I Learned)
2-1. React의 동작 원리
2-1-1. public/index.html - 웹 페이지의 기본 골격 제공
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div> <!-- React 삽입 지점 -->
<script type="module" src="/src/main.jsx"></script>
</body>
</html>- 브라우저가 이해할 수 있는 표준 HTML 구조 유지
- SEO, 접근성 등 웹 표준 준수
- React 없이도 기본 페이지 로딩 가능
2-1-2. src/main.jsx - HTML과 React 컴포넌트를 연결
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
// HTML의 root div를 찾고 → React 컴포넌트를 그 안에 삽입
ReactDOM.createRoot(document.getElementById('root')).render(<App />)- DOM에서 id="root"인 요소 탐색
- 해당 요소를 React 컨테이너로 변환
- App 컴포넌트를 그 컨테이너에 렌더링
2-1-3. src/App.jsx - 사용자가 보는 실제 UI와 로직
function App() {
return (
<div className="App">
<h1>화면에 나타날 내용</h1>
</div>
)
}
2-1-4. ⚙️ 연결 과정의 논리적 순서
Phase 1: 초기 로딩
브라우저 요청 → 서버가 index.html 전송 → 브라우저가 파싱Phase 2: React 시작
<script src="/src/main.jsx"> 실행 → React 라이브러리 로드Phase 3: DOM 연결
document.getElementById('root') → 빈 div 요소 획득Phase 4: 컴포넌트 삽입
ReactDOM.createRoot(rootElement) → React 컨테이너 생성
.render(<App />) → App 컴포넌트를 JSX→HTML 변환 후 삽입Phase 5: 최종 결과
<!-- 브라우저에서 실제로 보이는 DOM -->
<div id="root">
<div className="App"> <!-- App 컴포넌트가 변환된 HTML -->
<h1>실제 화면에 나타날 내용</h1>
</div>
</div>2-2. HTML → React 변환의 핵심 원리
- HTML: class="header" → React: className="header"
- HTML: 고정된 페이지 → React: 데이터 바뀌면 화면도 바뀜
2-3. React 컴포넌트 이름 규칙
- 컴포넌트: Header (대문자 시작)
- 변수: userData (소문자 시작)
2-4. 배열을 화면에 그리기
{items.map((item, index) => (
<div key={index}>{item.name}</div>
))}- key={index} 꼭 써야 함! (성능 때문에)
2-5. 조건부 렌더링
{type === 'image' && <img src="..." />} // type이 image면 이미지 보여줘
{type === 'code' && <CodeBlock />} // type이 code면 코드 블록 보여줘- && 연산자: JavaScript 단축 평가 활용 (true && JSX → JSX 렌더링)
- === vs ==: 엄격한 비교 vs 느슨한 비교, React에서는 === 권장
- 동적 값은 중괄호 {}, 정적 값은 따옴표 ""
2-6. 화살표 함수 return 규칙
// 이렇게 쓰면 return 생략 가능
const Component = () => (
<div>내용</div>
)
// 이렇게 쓰면 return 꼭 써야 함
const Component = () => {
return <div>내용</div>
}- 소괄호 (): 암시적 반환, return 키워드 불필요
- 중괄호 {}: 명시적 반환, return 키워드 필수
- return 없으면 undefined 반환되어 렌더링 안됨
3. 실수했던 부분들 (What I Struggled With)
- className={'class ${variable}'} → className={`class ${variable}`} (백틱 사용)
- 중첩된 map에서 매개변수명 겹침 → 외부(item, index), 내부 (content, contentIndex)로 구분
- 조건부 렌더링에서 변수명 착각: workshops.type → item.type (현재 반복 요소 사용)
- 괄호 짝 맞추기: 객체 {}, 배열 [], JSX 표현식 {}
4. 여전히 잘 모르겠는 부분
- DOM이 뭔지 감이 안 옴
- 뼈대나 구조 같은 건 알겠는데 정확한 정체를 모르겠음
- React 더 써보면서 자연스럽게 이해될 것 같음
- 문법이 아직 헷갈림
- 백틱, 중괄호, 괄호 짝 맞추기 등
- === vs ==, className vs class 같은 것들
- 패턴은 익숙해졌지만 여전히 실수함
- React 라이브러리 기능을 잘 모름
- useState, useEffect 같은 Hook들
'TIL' 카테고리의 다른 글
| 2025-08-09 NestJS + TypeORM DB 연동 (4) | 2025.08.10 |
|---|---|
| 2025-08-06 (6) | 2025.08.10 |
| 2025-07-31 (5) | 2025.07.31 |
| 2025-07-30 (4) | 2025.07.31 |
| 2025-07-21 (3) | 2025.07.23 |