[React] 카드 만들기 실습 Q&A 복습

HTML 자기소개 페이지를 React(Vite)로 변환하며 생긴 질문 정리.

완성 코드 (핵심 부분)

import './App.css'

function Card(props) {
  return (
    <section className="card">
      <h2>{props.title}</h2>
      <ul>
        {props.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </section>
  )
}

function List() {
  return (
    <div className="list">
      <Card title="관심 분야" items={["웹 개발", "React"]} />
      <Card title="배우고 싶은 것" items={["Git", "GitHub"]} />
      <Card title="언더독에서 이루고 싶은 것" items={["포트폴리오"]} />
    </div>
  )
}

function Main() {
  return (
    <main>
      <Profile />
      <List />
    </main>
  )
}

function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}

export default App

---

1. 환경

Q. HTML로 이미 되는데 왜 React를 쓰나?
A. 반복되는 부분을 틀 하나로 만들 수 있어서. HTML은 카드 3장을 복붙, React는 Card 1개 + 내용만 바꿔 3번 사용. 수정도 한 곳만.

Q. 왜 Vite를 쓰나?
A. 브라우저는 JSX를 못 읽음. Vite가 번역 + 미리보기 서버(localhost:5173) + 저장 시 자동 새로고침 담당.

Q. App.css는 뭐고, 왜 style.css는 적용 안 되나?
A. App.css는 그냥 파일 이름. CSS는 연결(import)된 파일만 적용됨.

• HTML: <link href="style.css">로 연결
• React: import './App.css'로 연결
  → style.css 내용을 App.css에 옮겨야 적용됨.

Q. 기본 스타일은 뭔가?
A. Vite가 로고 데모 화면용으로 넣어둔 CSS(App.css, index.css). 가운데 정렬 등이 남아 있어서 지워야 함.

Q. App은 뭔가?
A. 페이지 전체를 조립하는 최상위 컴포넌트.
index.html(빈 무대 #root) ← main.jsx(App을 올림) ← App.jsx(조립)

---

2. 컴포넌트 구조

Q. <Header /> <Main /> <Footer />가 카드인가?
A. 아니. 페이지의 큰 구역(서론/본론/결론). 카드는 Main 안의 List 안에 있음.

Q. 함수로 다 만들었는데 왜 Main에 <List />를 또 적나?
A. function List()는 정의(레시피), <List />는 사용(상차림). 사용해야 화면에 나옴. 지우면 카드가 사라짐.

Q. Main의 return은 누가 부르나?
A. App이 <Main />으로 부르고, App은 main.jsx가 부름.

main.jsx → App → Main → List → Card

이 호출 순서가 DOM 트리가 됨.

Q. 함수를 먼저 쓰고 Main을 뒤에 써야 하나?
A. 순서 상관없이 작동. 읽기 편하게 부품 → 조립 → App 순으로 씀.

---

3. 이름 규칙

Q. function Main과 <main>, </main>은 뭐가 다른가?

이름	정체
Main (대문자)	내가 만든 컴포넌트 이름
<main> </main> (소문자)	HTML 태그. Main이 화면에 만드는 상자
main.jsx	시작 파일

• 대문자 = 컴포넌트, 소문자 = HTML 태그
• </main>이 소문자인 건 HTML 태그를 닫는 것이라서

Q. 왜 HTML 태그랑 같은 이름을 붙였나?
A. 알아보기 쉬우라고 붙인 것. Bonmun으로 지어도 작동함.

---

4. HTML 태그

Q. <main>은 HTML에서 무슨 뜻?
A. 페이지의 핵심 본문. 한 페이지에 하나. 반복되는 머리말/꼬리말은 안 넣음.

Q. <section>은 왜 쓰나?
A. ① 제목+목록을 한 덩어리로 묶어야 카드 디자인을 입힐 수 있음 ② "주제가 있는 구역"이라는 의미 전달 (div와 모양은 같음)

Q. 왜 <ul>로 묶나?
A. <ul> = 목록 상자, <li> = 한 줄. li는 ul 안에 있어야 함. map은 li만 반복하고 ul은 바깥에 한 번.

Q. className은 왜 설정하나?
A. CSS와 연결하는 이름표. CSS의 .card { }가 className="card"인 요소를 찾아 스타일 적용. class는 JS 예약어라 className 사용.

---

5. JSX 문법

Q. { }는 뭔가? 그냥 구분자인가?
A. JSX 안에서는 "계산해서 결과를 넣어라" (엑셀의 =).

<p>1 + 1</p>     // 1 + 1
<p>{1 + 1}</p>   // 2

JSX 밖(function Card() { })의 중괄호는 코드 묶음 표시.

Q. 나머지는 자바가 아니면 뭔가?
A. 파일 전체가 자바스크립트(자바와 다른 언어). 그중 HTML처럼 생긴 부분이 JSX.

Q. title="..."과 items={[...]}는 왜 다르게 쓰나?
A. 따옴표 = 글자, 중괄호 = JS 값(배열 등).

---

6. props, map, key

Q. props는 뭔가?
A. 부모가 자식 컴포넌트에게 건네주는 값 묶음.

<Card title="관심 분야" items={[...]} />
// Card 안에서 props = { title: "관심 분야", items: [...] }

• 부모 → 자식 한 방향
• 받은 쪽은 읽기만

Q. props.items.map(...) 이게 props 구조인가?
A. props는 props.items까지. 나머지는 map.

{props.items.map((item, index) => (
  <li key={index}>{item}</li>
))}

"목록에서 하나씩 꺼내(item) li로 감싸라."

Q. key는 뭔가? 열쇠 모양?
A. 화면에 안 보이는 번호표. React가 반복된 li를 구분하려고 씀. 없으면 콘솔 경고.

---

헷갈렸던 실수

• 필기의 Function, Return → 소문자 function, return
• <u1> → <ul>
• 둥근 따옴표 “ ” → 곧은 따옴표 " "
• Header 안의 <head>, <meta> → 필요 없음 (index.html에 있음)
• 코드 붙여넣을 때 기존 내용 안 지워서 export default Appimport 에러