<< 학습 목표 >>
1. 프로젝트 내 컴포넌트들의 구조를 그릴 수 있다.
2. import 키워드에 대해서 설명할 수 있다.
3. export 키워드에 대해서 설명할 수 있다.
JSX와 컴포넌트 기초를 다지는 시간을 가져보자
지금 우리 프로젝트에서 화면에 컨텐츠가 보이는 구조와 과정은 다음과 같음
1. index.js 에서 화면에 보여줄 컴포넌트를 불러옴
2. 컴포넌트를 화면에 출력할 id가 root 태그를 불러옴
3. (2)에서 불러온 태그에 (1)에서 불러온 컴포넌트를 출력함
3권의 도서 정보를 출력하는 웹 페이지를 JSX와 컴포넌트 기초에서 배운 내용으로 만들어보자
이 웹 페이지의 구조는 다음과 같이 만들 것
먼저 각 도서의 정보를 출력할 컴포넌트를 만들자
3권의 도서 정보를 출력할 것이므로 컴포넌트는 3개를 만들 것
프로젝트 -> src -> chapter02 -> Book1.jsx, Book2.jsx, Book3.jsx 를 추가하자
<< Book1.jsx >>
import React from 'react';
function Book1() {
return (
<div>
<h1>도서명 : 소플의 처음만난 리액트</h1>
<h2>저자 : 이인제</h2>
<h3>출판사 : 한빛미디어</h3>
<hr/>
</div>
);
}
export default Book1;
<< Book2.jsx >>
import React from 'react';
function Book2() {
return (
<div>
<h1>도서명 : 리액트를 다루는 기술</h1>
<h2>저자 : 김민준</h2>
<h3>출판사 : 길벗</h3>
<hr/>
</div>
);
}
export default Book2;
<< Book3.jsx >>
import React from 'react';
function Book3() {
return (
<div>
<h1>도서명 : 한 입 크기로 잘라 먹는 리액트</h1>
<h2>저자 : 이정환</h2>
<h3>출판사 : 인사이트(insight)</h3>
<hr/>
</div>
);
}
export default Book3;
App.js 에서 각 컴포넌트를 불러와 출력하도록 하자
기존에 있던 App.js 는 사용하지 않고 Chapter02 안에 App.js 를 추가해 App 컴포넌트를 추가할 것
import React from "react";
import Book1 from "./Book1";
import Book2 from "./Book2";
import Book3 from "./Book3";
function App() {
return (
<div>
<Book1 />
<Book2 />
<Book3 />
</div>
);
}
export default App;
이제 마지막으로 index.js 파일 내 코드를 다음과 같이 정리(1)하고 App 컴포넌트를 불러오자(2)
이제 리엑트 프로젝트를 실행시키면 다음과 같이 3권의 도서 정보가 출력됨
앞으로 각 글에서 실습할 때는 Book1, Book2, Book3처럼 별도의 컴포넌트를 생성해 실습할 것임
각 글에서 실습한 것들을 확인하기 위해서 챕터별 폴더 안에 App.js 를 추가해 실습한 컴포넌트를 App.js가 불러오도록 할 것임
App.js 파일 이름은 App1.js, App2.js 처럼 App(number).js 로 지을 예정
index.js 에서는 Chapter02에서 실습한 걸 확인하기 위해 챕터별 폴더 안에 App(number).js 를 불러와 App 컴포넌트를 호출해 실습한 것들을 화면에 출력할 것
말로 들으면 어렵지만 한, 두번 해보면 어렵지 않을 것
컴포넌트에 반복적으로 사용한 import, export에 대해서 알아보자
Book1 컴포넌트와 App 컴포넌트를 통해 import, export에 대해서 단계적으로 알아보자
<< Book1 컴포넌트 >>
컴포넌트 마다 첫번째 줄에 (1) 이 있는데 이는 "이 파일 안에서 리엑트 코드를 쓰겠다" 임
이를 생략해도 상관 없는데 이를 생략하면 프로젝트가 실행될 때 (1) 이 자동으로 추가됨
즉, 리엑트 코드를 사용하려면 반드시 추가해야함
자동으로 추가되니 생략해도 상관은 없지만 왠만하면 수동으로 직접 추가해주는게 좋음
컴포넌트 마다 마지막 줄에 (2) 가 있는데 이는 "다른 파일에서 Book1 컴포넌트를 import 할 수 있게 해주겠다" 라는 것
따라서 컴포넌트 마지막 마다 반드시 추가해야함
<< App 컴포넌트 >>
컴포넌트를 불러올 때(1)는 반드시 ./ 부터 시작해야함
./ 는 현재 위치를 뜻하는 기호임
컴포넌트를 불러올 때 파일의 확장자는 생략함
컴포넌트를 불러오는 코드를 우리말로 해석해보면 현재 위치의 Book1.jsx 파일 내 컴포넌트를 불러오는데(1) 그 컴포넌트 명을 이 파일에서는 Book1 으로 사용하겠다(2) 임
아래 그림의 왼쪽에 App.js 에서 import Book1 이라고 했으므로 from으로 불러온 컴포넌트를 App.js 에서는 Book1 으로 사용하겠다는 것
만약 아래 그림의 왼쪽에 App.js 처럼 import Abc 라고 한다면 from으로 불러온 컴포넌트를 App.js 에서는 Abc 로 사용하겠다는 것이 됨
일반적으로는 처음의 App.js처럼 컴포넌트의 원래 이름과 import 해서 사용할 이름을 맞춰줌
'JS + React > React-Chapter01' 카테고리의 다른 글
| Chapter01. 리엑트 프로젝트 분석 (0) | 2023.03.29 |
|---|---|
| Chapter01. 리엑트 프로젝트 만들기 (0) | 2023.03.28 |
| Chapter01. 리엑트 설치하기 (0) | 2023.03.28 |
| Chapter01. 리엑트란? (0) | 2023.03.28 |
