안녕하세요. 박기린 입니다.
이번엔 리액트의 핵심인 컴포넌트(Component)를 만들어봅시다.
컴포넌트 만들기
// App.js
import ExpenseItem from './components/ExpenseItem';
function App() {
return (
// JSX
<div>
<h2>Let's get started!</h2> // 소문자
<ExpenseItem></ExpenseItem> // 대문자
</div>
);
}
export default App;리액트의 컴포넌트는 '함수형 컴포넌트'라고 부릅니다. 즉, JavaScript의 함수를 사용하기 때문에 function 키워드나 화살표 함수를 사용해서 컴포넌트를 생성할 수 있습니다.
class형 컴포넌트도 있으나, 최신 React 버전에는 대부분 함수형 컴포넌트를 사용하기에 설명을 생략하겠습니다.
JSX
return (
<div>
<h2>Let's get started!</h2>
<ExpenseItem></ExpenseItem>
</div>
);함수형 컴포넌트의 return() 안에 들어가는 코드는 JSX코드라고 부릅니다.
JSX는 JavaScript Xml의 준말입니다. React팀에서 개발한 구문으로, JS파일에서 <html 문구 - 태그>를 사용할 수 있게 해줍니다. React-JS 엔진 백그라운드에서 JSX코드를 DOM으로 자동 변환합니다.
컴포넌트 작명 방식
// ExpenseItem.js
function ExpenseItem() {
return <h2>Expense item!</h2>
}
export default ExpenseItem;// App.js의 jsx 코드 발췌
<h2>Let's get started!</h2> // 소문자 : HTML의 기본 h2 태그
<ExpenseItem></ExpenseItem> // 대문자 : 직접 생성한 컴포넌트컴포넌트와 컴포넌트가 담긴 JS파일의 이름은 모두 UpperCamelCase로 짓습니다. JSX 구문에서 HTML 태그와 구분을 짓기 위해서 입니다. 소문자로 시작하면 HTML, 대문자로 시작하면 컴포넌트입니다.
반응형
'JS > React 강의' 카테고리의 다른 글
| [React] 6. useState()를 파헤쳐 보기 (0) | 2023.02.13 |
|---|---|
| [React] 5. 이벤트 리스너와 이벤트 핸들러 만들기 (onProps) (1) | 2023.02.07 |
| [React] 4. JSX란 무엇일까? (0) | 2023.02.07 |
| [React] 3. props / props.children 컴포지션 (0) | 2023.02.07 |
| [React] 1. 리액트에 대한 사전 지식 (0) | 2023.02.03 |
