일단 React의 전체적인 흐름을 파악하기 위해서, index.html, index.js, app.js 파일을 살펴보겠습니다.
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>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>index.html이 실제로 브라우저에 보여지는 화면인데, 파일안에는 아무 컨텐츠도 존재하지 않습니다.
그런데도, react의 로고나 링크같은 것이 보였던 이유는
<div id="root"></div> 태그 때문입니다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();index.js에서 document.getElementById('root')라고 적혀있는 부분이 있습니다.
javascript를 해보신분은 무슨 의미인지 알고 있을 겁니다. id값이 root인 엘리먼트를 식별하고 있습니다.
즉 위에 index.html에서의 div태그를 가르키는 것이고
<App />이라는 앞으로 사용하게될 컨포넌트가 있습니다.
기존 html에는 <App>이라는 태그가 존재하지 않지만, React에서 컴포넌트를 정의해 태그처럼 사용할 수 있게 됩니다.
즉 App 컴포넌트의 있는 내용이 서버를 실행했을 때 보여지게 되는 React 로고와 링크들입니다.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
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;App.js에는 App 컴포넌트에 대한 정의가 되어있습니다.
그러면, 기존의 코드를 다 지우고 아래의 코드를 넣어서 실행해보겠습니다.
<div>
안녕
</div>
그러면 기존의 오른쪽 화면이었던 것에서, 왼쪽에 새롭게 추가한 코드가 보이는 것을 확인할 수 있습니다.
컴포넌트를 선언할 때 주의할점은 무조건 최상위에 태그가 존재해야한다는 점입니다.
<div>
안녕
</div>위의 처럼 div로 최상위에 감싸져있듯이 이렇게 최상위 태그가 존재해야 합니다.
이게 없으면 에러가 발생합니다.
새롭게 component 추가하기
이번엔 이번의 포스팅에 목적이었던 component 생성하기를 해보겠습니다.
App.js에 다른 header 컴포넌트를 추가하는 작업을 해보겠습니다.
src/components/header.js
function Header(props) {
return (
<header>
<h1><a href="/">Web</a></h1>
<div>World Wide Web</div>
</header>
);
}
export default Header;그러면, 위의 컴포넌트를 App.js에서 사용하기 위해서
import Header from './components/Header';App.js 코드 위에 위의 코드를 추가합니다.
그러면 이제 <Header>라는 컴포넌트를 사용할 수 있는 상태고
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div>
<Header />
</div>
);
}
export default App;위의 코드를 App.js에 넣게되면
브라우저에 위와같은 화면을 확인할 수 있다.
App.js에는 <Header />를 하나 추가했을 뿐인데, Header.js에서 작성했던 코드가 브라우저 화면에서 볼 수 있습니다.
이것이 컴포넌트이고, 이렇게 컴포넌트를 사용하게 되면, 코드의 가독성, 재사용성, 유지보수을 쉽게 할 수 있다는 장점이 있습니다.
'IT 공부 > Javascript' 카테고리의 다른 글
| [ React ] state 사용해서 데이터를 전달하기 (props와 state의 차이점) (0) | 2022.01.13 |
|---|---|
| [ React ] props를 이용해서, 하위 컴포넌트로 값을 보내기 (0) | 2022.01.12 |
| [ React ] 환경 및 새로운 프로젝트 생성 방법 (0) | 2022.01.12 |
| [ Vue.js ] vue 이용해서 웹프로젝트 시작하기! (라우팅 / bootstrap) (0) | 2021.08.04 |
| [ JavaScript ] Class - 객체지향 개발 (0) | 2021.06.24 |
