티스토리 뷰

개발직설/React

react의 기본 코드 이해하기

SdardewValley 2021. 1. 14. 19:38
반응형
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;

src/App.js 파일이다. 위의 코드를 하나씩 이해해보겠다.

 

import React from 'react';

리액트를 불러와 주는 코드이다. 처음 create-react-app으로 리액트 프로젝트를 만들 때 node_modules라는 디렉토리도 함께 생성된다. 이 node-modules에 react 모듈이 설치되고 import를 통해서 불러올 수 있다.

 

번들러(bundler)을 사용하여 파일을 연결할 수 있다. src/index.js로 파일들을 불러와서 번들링을 한다.

import logo from './logo.svg';
import './App.css';

웹팩을 통해서 SVG 파일과 CSS 파일을 불러오는 코드이다. 웹팩은 번들러 중 하나이다. 로더(loader)가 파일을 불러오는 역할을 해 준다.

로더에는 여러 종류가 있다.

  • css-loader: CSS 파일
  • file-loader: 웹 폰트, 미디어 파일 등
  • babbel-loader: 자바스크립트 파일을 최신 자바스크립트 코드로

create-react-app이 로더를 설치하고 설정해주는 역할을 한다.

 

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>
  );
}

App이라는 컴포넌트를 만들어주는 코드이다. function 키워드를 통하여 함수형 컴포넌트를 생성한다. 이 코드를 JSX라고 한다.

 

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')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

src/index.js 파일이다.

ReactDom.render은 react-dom 모듈을 불러야 사능 가능하며 컴포넌트를 페이지에 렌더링하는 역할을 한다.

렌더링할 내용을 JSX 형태로 작성한후, 해당 JSX를 렌더링할 element를 설정한다. document.getElementById를 보면 id가 root인 element 안에 렌더링 하는 것을 알 수 있다. root element는 public/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>

위의 코드는 public/index.html 코드이다. 여기서 밑에서 세번째 줄의 div element를 보면 id가 root인 것을 확인할 수 있다.

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함