[React] - JS, CSS 코딩, 배포하는 법, 컴포넌트 만들기

Jeonghwan Kim·2022년 12월 17일

CSS React component js

React

목록 보기

2/6

부스트코스 강의 웹 프론트엔드 시작하기 (리액트&리덕스)
중 'Ch2 리액트 맛보기'을 정리한 내용이다.

JS 코딩하는 법

directory의 구조를 보면 public과 src라는 디렉토리가 있는데, public에는 'index.html'이 있고 그 중 리액트를 통해 만들어낸 component들은 id가 root인 태그에 들어가게 된다.
```
<div id="root"></div>
```
대부분의 파일은 src 디렉토리에 넣고, 여기서 수정하면 Index.html에 적용된다.
- entry 파일은 index.js 파일로, 가장 주요한 부분은 아래 코드이다.
```
ReactDOM.render( <APP/> , document.getElementById('root') );
```
- root는 index.html의 id인 root와 같은 것이고, 앞의 이 React를 통해 만든 컴포넌트이다.
  - 컴포넌트의 구현은 src안의 App.js파일이다. 이 파일 내용을 수정하면 내용을 변경할 수 있다.
  - 이 때 하나의 태그 안쪽에 나머지 태그들이 있도록 유의한다.

CSS 코딩하는 법

index.js파일을 보면 index.css 파일이 있는데, 이를 수정하면 된다.
App.js의 아래 코드는 app.js안에 있는 react의 컴포넌트가 로드됐을 때 app.css도 같이 로드되게 해준다.
```
import './App.css';
```

배포하는법

React가 만든 간단한 앱은 용량이 매우 큰 편인데, 개발의 편의성을 위해 다양한 기능이 추가되었기 때문이다. 따라서 사용자들에게 배포할 때는 다른 방법을 사용하는데, 'npm run start' 대신 'npm run build'로 create-react-app를 빌드해준다.
그럼 디렉토리에 새로운 'build'가 생긴다. build 디렉토리 내부의 파일들은은 용량을 줄이기 위해 공백을 제거한 상태이다.
서비스할 때는 build안의 파일들을 사용하면 되고, web server가 문서를 찾는 최상위 디렉토리인 web server의 doument root에 build안의 파일을 위치시키면 실서버 환경이 완성된다.
npm install -g serve를 통해 간단히 웹서버를 설치할 수 있다.
npx serve -s build 를 사용하면 한번만 시킬 웹서버를 실행시키는데, 서브라는 웹서버를 다운로드 받아 실행시킬 때 build 디렉토리를 document root로 한다.

리액트가 없다면

보통 웹페이지를 만들 때 다음과 같이 html로 길게 코드가 작성된다.

<html>
    <body> 
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>

        <nav>
            <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
              </ul>
        </nav>

        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>
    </body>
  </html>

시멘틱 태그를 사용해 다른 곳에 코드를 숨겨 코드를 간단하게 바꾸면서 실제로 기능적으로는 같은 웹페이지를 만들 수 있게 해준다.
```
<header>
    <h1>WEB</h1>
    world wide web!
</header>
```
이를 가능하게 해주는게 React이다.

컴포넌트 만들기 (1), (2)

App.js 파일에서 아래 코드 부분이 컴포넌트를 만드는 부분이다.
- App이라는 클래스를 만들고, 컴포넌트라고 하는 리액트가 갖고있는 클래스를 상속해서 새로운 클래스를 만든다. render라고 하는 메서드를 가지고 있다.
순수 html로 짠 코드 부분의
부분을 Subject라는 이름의 태그로 바꾸기 위해 아래 코드를 이용한다.
```
class Subject extends Component {
  render() {
    return ( 
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}
```
- 클래스는 대문자로 시작하고, extends Component는 Subject라는 component를 만든다는 뜻이다. 컴포넌트는 반드시 하나의 최상위 태그(여기선 header)만 사용한다.
App.js파일에 자성한 코드는 자바스크립트와 비슷하지만 문법이 쉬운 'jsx'언어로, 페이스북에서 만든 언어이다.
다른 컴포넌트들도 마찬가지로 여러개 만들어 준다.
React의 컴포넌트는 '정리정돈의 도구'로 보면 좋다. 컴포넌트의 이름에만 집중하게 해 복잡도를 낮춘다.