2. React의 구조 그리고 샘플 웹 앱 실행, 코딩, 배포

React를 구성하는 핵심 3개 파일

public - index.html

  <title>React App</title>
  </head>
  <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>
</html>

메인 파일인 index.js의 결과창, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 을 읽어와 렌더링된 결과가 표시된다. index.js의 div id="root"를 내포하고있다.

src - index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

메인파일. ReactDom이 App컴포넌트를 document에서 id값이 root인 태그안에 랜더링 해준다는 의미다. ReactDOM.reder(컴포넌트, 조합 대상 요소); 로 코드를 구성한다. "id가 'root'인 요소들을 아이디 선택자를 기반으로 index.html로 보내주겠다.라는 의미"이다.

src - app.js

import './App.css';
import { Component } from 'react';

class App extends Component  {
  render () {
    return (
    <div className="App">
      Hello, React!!
    </div>
    );
  }
    
}

export default App;

컴포넌트를 정의하는 파일. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다. App컴포넌트는 App.js 파일에 선언되어있다. 리액트의 모든 클래스형 컴포넌트는 App 컴포넌트의 구조와 똑같이 만들면 된다.

마지막의 export default App; 의 코드로 다른 파일에서 import가 가능해지고, 중간에 있는 defult는 해당 파일에서 기본적으로 App 컴포넌트 하나만 export한다는 의미이다.

<div className="App"> : 웹에서 실제로 보여지는 부분
이 div 안의 내용을 바꾸고 저장하면 React가 자동으로 페이지를 리로드 해준다.
보여주고자 한 요소들은 만드시 <div>태그 안에 들어가 있어야 한다.

Sampe Web App 실행하기

1. 오픈폴더를 눌러 지난 포스팅에서 만들었던 react-app폴더로 들어가기

2. view - Appearance - Show panel 누르면 터미널 등장!

3. 터미널에 npm run start 입력 (중간에 크롬허용할래? 이러면 ok 누르면 됨)

4. localhost:3000을 가진 새로운 페이지 등장

JavaScript 코딩하기

public 은 사용자에게 노출되는 파일들이고, 대부분의 개발은 src에서 이루어진다 (퍼블릭에서는 .js 파일을 id 선택자로 불러온다).

index.html 열어보면 이렇게 div id=root라고 써있는데

src index.js에 들어가보면 이렇게 id값이 root를 선택하는 Js 선택자 문법이 들어있다.

또 여기엔 app을 임포트 했다는 내용을 볼 수 있는데 (라인 4) './App'은 src에 들어있는 App.js 파일을 가르킨다.

App.js는 리액트를 통해 만든 사용자 정의태그 즉, 컴포넌트이다. 코드는 app에서 짜고 index에서는 app을 임포트 해와서 사용한다.

생활코딩에서는 function type(함수 호출방식)이 아닌 class type(클래스 호출방식)으로 사용해서 아래와 같이 App.js 코드를 수정했다.

간단하게 먼저 일반적인 두 컴포넌트의 차이를 알아보면 아래와 같다. 이 부분들은 아직은 봐도 이해가 잘 가지않아 이정도로만 정리해두고 배우면서 또 포스팅을 쓸 예정이다. 느낌이 함수형은 파이썬, 자바스크립트 같은 느낌이고.. 클래스형은 자바같은 느낌이다.

클래스형 :

state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다.

함수형 :

state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.

CSS 코딩하기

App.css와 index.css에서 다른 css와 동일하게 수정이 가능하다.

배포하기

create react app 개발환경은 보이는 기능이 하나도 없어도 리액트가 여러가지 기능들을 추가해놓은 상태이기 때문에 기본파일의 무게가 무겁다. 하지만 사용자들이 이 모든것들을 다 볼 필요도 없고(보안상의 이유로), 파일도 가벼운 파일로 배포하는 것이 좋기 때문에 build로 배포한다.

build 디렉토리를 생성한다.