1. 컴포넌트 설명
리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다.
컴포넌트는 딱 두가지만 기억하면 됩니다.
1. 함수로 구성
2. UI 를 Return
결국 HTML를 리턴하는 함수라고 볼 수 있습니다.
(HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. )
2. React 시작의 App.js 를 살펴보자
우리가 리액트를 사용하기 위해서 폴더에 리액터를 지정하게 되면 App.js 파일을 확인 할 수 있습니다.
App.js 도 물론 컴포넌트를 만들어 준 하나의 js 파일입니다.
App.js
import logo from './logo.svg';
import './App.css';
//함수로 선언
function App() {
// 리턴으로 HTML를 반환 하는 것을 볼 수 있습니다.
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App; //다른 곳에서 쓸수 있도록 단일(default) epxort 선언
App.js를 사용하는 곳은 바로 index.js 입니다. index.js 소스코드를 보면 ReactDOM.render 안에 <App/> 으로 사용하는 것을 볼 수 있다.
index.js
ReactDOM.render(
<React.StrictMode>
<App /> //여기서 App 컴포넌트를 사용합니다.
</React.StrictMode>,
document.getElementById('root') // root에다가 위 컴포넌트를 사용합니다.
);
위 소스코드의 root를 찾아보면 index.html에서 찾아볼 수 있습니다.
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
지금까지 내용은 너무 지루했다. 다음 내용부터는 그냥 따라만 하면 이해가 간다.
다음 글 이어보기 : [React] 컴포넌트(Component) 설명 및 사용방법 (2) - 컴포넌트 간단 예제
'Front-End > React' 카테고리의 다른 글
| [React] {} 중괄호로 자바스크립트 문법 사용하기(JSX) (0) | 2021.08.17 |
|---|---|
| [React] 컴포넌트 상속(부모, 자식) 구현 방법 (0) | 2021.08.17 |
| [React] 컴포넌트(Component) 설명 및 사용방법 (2) - 컴포넌트 간단 예제 (0) | 2021.08.12 |
| [React] export, import (0) | 2021.08.12 |
| [React] React 설치하기 (0) | 2021.08.03 |