01 App

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

이번 단계에서 할 일

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

App.jsx 역할

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

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

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

`src/components/Nav.jsx`

1
const Nav = () => {
2
  return <div>Nav</div>
3
}
4
export default Nav

`src/components/Hero.jsx`

1
const Hero = () => {
2
  return <div>Hero</div>
3
}
4
export default Hero

`src/components/AboutMe.jsx`

1
const AboutMe = () => {
2
  return <div>AboutMe</div>
3
}
4
export default AboutMe

`src/components/Projects.jsx`

1
const Projects = () => {
2
  return <div>Projects</div>
3
}
4
export default Projects

`src/components/Contact.jsx`

1
const Contact = () => {
2
  return <div>Contact</div>
3
}
4
export default Contact

`src/components/Footer.jsx`

1
const Footer = () => {
2
  return <div>Footer</div>
3
}
4
export default Footer

STEP 2 — App.jsx 작성

1
import Nav     from './components/Nav'
2
import Hero    from './components/Hero'
3
import AboutMe from './components/AboutMe'
4
import Projects from './components/Projects'
5
import Contact from './components/Contact'
6
import Footer  from './components/Footer'
7

8
const App = () => {
9
  return (
10
    <div className="app container">
11
      <Nav />
12
      <Hero />
13
      <main>
14
        <AboutMe />
15
        <Projects />
16
        <Contact />
17
      </main>
18
      <Footer />
19
    </div>
20
  )
21
}
22

23
export default App

코드 설명

import 란?

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

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

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

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

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

1
// 오류 — 최상위 태그가 2개
2
return (
3
  <Nav />
4
  <Hero />
5
)
6

7
// 정상 — 하나의 div로 감쌈
8
return (
9
  <div className="app container">
10
    <Nav />
11
    <Hero />
12
  </div>
13
)

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

export default 란?

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

1
// 내보내기
2
export default App
3

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

브라우저 확인

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

1
Nav
2
Hero
3
AboutMe
4
Projects
5
Contact
6
Footer

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