01. App.jsx — 전체 레이아웃 조립

이번 단계에서 할 일

만들 컴포넌트들을 App.jsx 에 미리 배치합니다. 지금은 빈 껍데기만 만들고, 다음 단계에서 하나씩 채워나갑니다.

---

App.jsx 역할

App.jsx
  ├── <Nav />        ← 네비게이션
  ├── <Hero />       ← 히어로 섹션
  ├── <main>
  │     ├── <AboutMe />   ← 소개
  │     ├── <Projects />  ← 프로젝트
  │     └── <Contact />   ← 연락처
  │   </main>
  └── <Footer />     ← 하단 푸터

---

STEP 1 — 빈 컴포넌트 파일 6개 만들기

src/components/ 폴더를 만들고 아래 파일들을 각각 생성합니다. 지금은 이름만 표시되는 단순한 내용으로 작성합니다.

src/components/Nav.jsx

const Nav = () => {
  return <div>Nav</div>
}
export default Nav

src/components/Hero.jsx

const Hero = () => {
  return <div>Hero</div>
}
export default Hero

src/components/AboutMe.jsx

const AboutMe = () => {
  return <div>AboutMe</div>
}
export default AboutMe

src/components/Projects.jsx

const Projects = () => {
  return <div>Projects</div>
}
export default Projects

src/components/Contact.jsx

const Contact = () => {
  return <div>Contact</div>
}
export default Contact

src/components/Footer.jsx

const Footer = () => {
  return <div>Footer</div>
}
export default Footer

---

STEP 2 — App.jsx 작성

// src/App.jsx
import Nav     from './components/Nav'
import Hero    from './components/Hero'
import AboutMe from './components/AboutMe'
import Projects from './components/Projects'
import Contact from './components/Contact'
import Footer  from './components/Footer'

const App = () => {
  return (
    <div className="app container">
      <Nav />
      <Hero />
      <main>
        <AboutMe />
        <Projects />
        <Contact />
      </main>
      <Footer />
    </div>
  )
}

export default App

---

코드 설명

import 란?

다른 파일에서 만든 컴포넌트를 불러오는 것입니다.

import Nav from './components/Nav'
//     ↑          ↑
//  내가 부를 이름  파일 경로

• ./ 는 현재 파일과 같은 폴더를 의미합니다
• App.jsx는 src/ 안에 있으므로 ./components/Nav 는 src/components/Nav.jsx

<div className="app container"> 으로 감싸는 이유

JSX는 반드시 하나의 부모 태그 안에 내용이 있어야 합니다.

// 오류 — 최상위 태그가 2개
return (
  <Nav />
  <Hero />
)

// 정상 — 하나의 div로 감쌈
return (
  <div className="app container">
    <Nav />
    <Hero />
  </div>
)

• app — 전체 페이지를 감싸는 최상위 클래스
• container — 콘텐츠 너비를 제한하고 가운데 정렬 (02_CSS기초에서 정의)

export default 란?

다른 파일에서 이 컴포넌트를 import 할 수 있게 내보내는 것입니다.

// 내보내기
export default App

// 불러오기
import App from './App'

---

브라우저 확인

저장 후 브라우저를 열면 아래처럼 보입니다.

Nav
Hero
AboutMe
Projects
Contact
Footer

텍스트만 나오는 게 정상입니다. 다음 단계부터 하나씩 꾸밉니다.

---