컴포넌트
리액트는 컴포넌트 개발형식이며, 컴포넌트는 UI 조각이며 쉽게 재사용이 가능합니다.
컴포넌트는 여러개 만들 수 있지만, 리액트는 한 번에 하나의 컴포넌트만 렌더링 할 수 있습니다.
Hello.js
// 컴포넌트 생성
// 리액트 컴포넌트 만들 땐 최상단에 하단 처럼 리액트를 불러와야 인식
import React from 'react';
// 만들 컴포넌트 함수형
function Hello() {
return <div>hello, react!<div>
}
// 컴포넌트 내보내기
// 다른 곳에서 Hello 컴포넌트를 불러올 수 있음
export default Hello;App.js
import React from 'react';
// 최상단에 불러올 컴포넌트 가져오기
improt Hello from './Hello';
// 내보낸 컴포넌트 넣기
function App() {
return (
<div>
<Hello/>
</div>
);
}
export default App;index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// ReactDOM은 실제 DOM 내부에 리액트 컴포넌트를 렌더링 한다는 의미
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
// id가 root인 DOM 을 선택
document.getElementById('root')
);
reportWebVitals();index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
// 리액트 컴포넌트가 렌더링 될 때에는, 하단의 div 내부에 렌더링 되는 것
<div id="root"></div>
</body>
</html>'Web Tech > react' 카테고리의 다른 글
| React 기본 - 5.props (0) | 2022.01.12 |
|---|---|
| React 기본 - 4.JSX (0) | 2022.01.11 |
| React 기본 - 2.리액트 환경설정 및 시작하기 (0) | 2022.01.11 |
| React 기본 - 1.리액트란? (0) | 2022.01.11 |
| react 기본 - 18.Context API 로 전역 값 관리 (0) | 2021.12.06 |
