내가 한 노력들

[ React ] component 만들어보기 본문

IT 공부/Javascript

[ React ] component 만들어보기

JONGI-N CHOI 2022. 1. 12. 15:34

일단 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
'IT 공부/Javascript' Related Articles more