2장 - Create Project and JSX

기운찬곰·2020년 9월 5일
React
0

React

목록 보기
1/5
post-thumbnail

Create Project

Create React App은 React를 배우기에 간편한 환경이다.

Create React App는 Babel이나 webpack같은 build 도구를 사용하나, 설정 없이도 동작한다. 사용하기 전에 Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위버전이 필요하다.

create-react-app

$ npm install -g create-react-app

공식사이트에서는 npx 사용을 권장하고 있다. 참고로 npm과 npx의 차이점은 npm은 딱한번 설치하면 되며 npx는 실행할때마다 설치해야한다. 실행이 끝나면 사라진다는 점. 그래서 항상 최신상태를 유지할 수 있고 공간차지를 덜한다 뭐 이정도의 장점이 있지만 나는 그냥 npm을 쓰겠다.

원하는 폴더를 생성 후 아래와 같이 입력해준다.

$ create-react-app my-app

설치하는데 시간이 좀 걸린다. 설치가 끝나면 my-app 폴더 안으로 이동하자.

run project

설치가 끝났다면 npm run start를 해보자. 그럼 자동으로 3000번 포트에 서버가 열리게 된다.

접속해보면 아래와 같은 화면이 나온다.


Project structure

public은 공통적으로 쓰이는 파일을 나타낸다. index.html이 가장 핵심이자 처음 시작부분이다.

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>

body에는 <div id="root"></div>말고는 아무것도 없습다. 근데 어떻게 메인화면은 아래처럼 나왔을까? 🤔

index.js

그 핵심은 src폴더에 있다. src에 index.js를 보겠다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

document.getElementById에서 아까본 root가 있다. 아마 <div id="root"></div>를 App으로 대체시켜서 보여주는거 같다.

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에 실제 내용인것을 확인할 수 있다. 특이하게도 자바스크립트안에 html이 있다. 하지만 그냥 html이 아니라 뭔가 특이하다는 것을 알 수 있다. 이것은 JSX 라는 자바스크립트 확장 문법이다.


Learn JSX

💻 Babel 사이트에 가보면 JSX코드가 어떻게 자바스크립트로 변환되는지 확인해볼 수 있다.

JSX문법

(
    <div>
    	<p>Hello, <b>ckstn</b> </p>
    </div>
)

Babel을 통해 자바스크립트 변환

"use strict";

React.createElement("div", null, React.createElement("p", null, "Hello, ", 
   React.createElement("b", null, "ckstn"), " "));

JSX rules

JSX에 대한 규칙 몇가지만 준수하면 쉽게 사용할 수 있다.

  1. 컴포넌트에 여러요소가 있다면 반드시 부모 요소 하나로 감쌀 것(보통은 <> ~ </> 를 많이 쓴다)
  2. JSX안에 자바스크립트 표현식을 쓸 수 있다. JSX 내부에서 {}로 감싸면 된다. 이렇게 하면 변수, 함수 사용이 가능해진다.
  3. if문 대신 조건부 연산자. 삼항연산자 혹은 &&, || 를 써야한다. (중요합니다)
  4. class 대신 className으로 써야 한다. 물론 이렇게 안해도 작동은 됩니다만 Warning이 떠서 보기 안좋다.
  5. 단일 태그라도 꼭 닫아준다. 가령 단일 태그같은 img도 <img /> 이렇게 써야 한다.

Conditional operation

1. && 연산

&& 연산은 앞에 조건이 true라면 뒤에 값을 보여줄 때 사용한다. 

function App() {
  const name = "react";

  return <div>{name === "react" && "react가 맞습니다."}</div>;
}

2. || 연산

|| 연산은 앞에 조건이 false라면 뒤에 값을 보여줄 때 사용한다. undefined처럼 값이 존재하지 않는 변수를 보여주려고 하면 에러가 나는데 이것을 막기 위해 많이 사용한다.

function App() {
  const name = undefined;

  return <div>{name || "값이 존재하지 않습니다"}</div>;
}

Inline Style

style을 적용할 때 약간 특별한 규칙이 있는데 객체 형태로 값을 지정한 다음 넣어야 한다. 그리고 스타일 속성이 원래는 font-size였다면 JSX에서는 fontSize 같은 카멜 표기법으로 작성해야 한다는 특징이 있다.

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: "white",
    border: "2px solid red",
    padding: 16,
    margin: 16,
    fontSize: "32px",
  };

  return <div style={style}>{name || "값이 존재하지 않습니다"}</div>;
}


VS Code 유용한 도구

1. ESLint

자바스크립트 문법 검사 도구 이다. 다양한 커스텀 규칙을 설정할 수 있다. Prettier는 스타일 규칙에 중점을 둔다면 ESLint는 문법, 스타일 등 정말 다양한 규칙이 존재한다. (그래서 그런지 Prettier와 ESLint간에 서로 중복되는게 있는데, 보통은 Prettier는 스타일에, ESLint는 문법에만 신경을 써준다)

👉 ESLint 규칙들(공식문서) : https://eslint.org/docs/rules/

사용방법은 먼저 VS Code 마켓 플레이스에서 ESLint를 설치해준다. 그런다음, package.json을 보면 아래처럼 작성이 되어있을거다.

  "eslintConfig": {
    "extends": "react-app"
  },

이는 create-react-app으로 생성된 프로젝트는 eslint-config-react-app 라이브러리가 자동 설치되며 이 라이브러리에서 리액트 앱에 필요한 대부분의 ESLint 옵션들이 작성되어 있어서 쉽게 문법 체크를 할 수 있게해준다.

2. Prettier

  • 문자열을 작은따음표로 할지 큰따음표로 할지
  • 세미콜론은 자동으로 붙일지 말지
  • 들여쓰기는 얼마나 할지
  • 기타 등등...

이런것들을 관리할 수 있다. 이 역시 자기 마음대로 커스텀마이징 할 수 있다.

👉 공식문서 : https://prettier.io/docs/en/configuration.html

사용방법은 마찬가지로 마켓 플레이스에서 Prettier를 설치해준다. 그 다음에 프로젝트 디렉토리에 .prettierrc 파일을 만들어주자.

{
    "trailingComma": "all",
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2
}
  • trailingComma : 객체나 배열을 생성할때 마지막 원소 뒤에 콤마를 찍을건지 말건지를 결정
  • tabWidth : 들여쓰기 칸 수
  • semi : 세미콜론 쓸지 말지
  • singleQuote : 작은따음표 사용할지 말지

이것 말고도 옵션은 정말 많다. 자신이 필요한거에 맞춰서 쓰면 될거 같다.

마지막으로, 파일에 가서 기본 설정에가서 format on save를 체크해주면 저장시에 자동으로 정리가 될것이다.

3. Snippet

마켓플레이스에 Reactjs code snippets이란게 있다. 스니펫을 사용하면 특정 단어(단축어)를 입력하면 자동으로 여러줄에 긴 코드가 짠 하고 나타난다.

이게 무슨 소리냐면 아래 그림처럼 rcc를 입력하면 오른쪽에 긴 코드를 한번에 불러올 수 있다.

이게 아니더라도 내가 직접 만드는 방법도 가능하다.

👉 스니펫 제러네이터 : https://snippet-generator.app/

profile
기운찬곰
배움을 좋아합니다. 새로운 것을 좋아합니다.
다음 포스트

3장 - Props and State

0개의 댓글