[React] 컴포넌트
1. 컴포넌트란?
- 리엑트에서 UI를 구성하는 재사용 가능한 고립된 코드의 파편
2. 컴포넌트 만들기
- 함수형, 클래스형 2가지 방법이 존재합니다 (본 글에서는 함수형을 사용합니다.)
1) 함수 정의 하기
- 함수 이름은 대문자로 시작해야 한다.
- 함수 이름이 컴포넌트의 이름이 된다.
2) 마크업 리턴 (JSX 방식)
- 함수에서 마크업(HTML)을 리턴하는 방식
| JSX 규칙 | |
| 1. 하나의 부모 태그로 감싸야 한다. | |
| 2. 모든 태그가 닫혀 있어야 한다. | |
| 3. 대부분 캐멀케이스를 사용한다. |
※ React에서는 대부분의 코드베이스로 JSX를 사용한다.
3) 컴포넌트 사용하기
- 컴포넌트 이름을 일반 HTML 태그처럼 사용한다.
4) 컴포넌트 파일 분리하기
- export default 접두사를 사용하여 해당 파일 외부에서 컴포넌트를 사용할 수 있도록 한다.
(JS 문법으로 외부 파일에서 import하여 사용할 수 있도록 해주는 구문이다.)
3. 실습
1) 파일 정리
> 아래처럼 폴더를 정리한다.
> index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
> index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
> App.js (실제 화면에 그려지는 파일)
function App() {
return (
<h1>Hello React</h1>
);
}
export default App;
> 결과
2) 컴포넌트 만들기
- MyComponent 이름의 컴포넌트를 만든다
> App.jsx
(App.js → App.jsx)
// 컴포넌트 이름은 대문자여야 한다.
// 함수 이름이 컴포넌트의 이름이다.
function MyComponent() {
// 화면에 표시할 마크업을 리턴한다.
return (
<h2>
This is my new component
</h2>
)
}
function App() {
return (
// 컴포넌트는 항상 하나의 부모 태그에 감싸져 있어야한다.
// <> </> 같은 태그도 가능하다.
<>
<h1>Hello React</h1>
{/* HTML 호출하듯이 컴포넌트를 호출한다. */}
<MyComponent />
</>
);
}
export default App;
※ JSX에서 주석은 {/* 주석 내용 */} 형식이다.
※ VS Code에서 정렬 (단축키: Shift + Alt + F)
> 결과
3) 컴포넌트 파일 분리하기
> src에 파일생성 (MyComponet.jsx)
> MyComponet.jsx
// 컴포넌트 이름은 대문자여야 한다.
export default function MyComponent() {
// 화면에 표시할 마크업을 리턴한다.
return (
<h2>
This is my new component
</h2>
)
}
// export
> App.jsx
// 외부 파일에서 컴포넌트 import
import MyComponent from "./MyComponent";
function App() {
return (
// 컴포넌트는 항상 하나의 부모 태그에 감싸져 있어야한다.
// <> </> 같은 태그도 가능하다.
<>
<h1>Hello React</h1>
{/* HTML 호출하듯이 컴포넌트를 호출한다. */}
<MyComponent />
</>
);
}
// 이런 방식으로도 컴포넌트를 export 할 수 있다
export default App;
> 결과는 동일하다.