React로 무작정 개발하기 - 0 (준비)

React 시작하기

React를 어떻게 쓰기에 앞서 react가 무엇인지. vue에 비해 뭐가 좋고 뭐가 나쁜지 알아보도록 하자(작성자는 react보다는 vue를 선호한다. template 방식이 너무 쉽고 편하다고 생각)

---

React란 무엇인가?

React repo를 들어가보면 React is a JavaScript library for building user interfaces. 이와 같이 시작한다. 유저 인터페이스(UI)를 위한 JS 라이브러리 임을 알 수 있다.
개인적으로는 js에서 html을 매핑해서 html처럼 렌더링 될 수 있게끔 하는 것으로 보인다.

Vue.js와 마찬가지로, react 역시 webpack과 같이 사용할 경우 프레임워크 처럼 구조를 잡고 개발을 할 수있는걸로 보인다. (갓 웹팩)

---

React vs Vue (주관적)

실무에서 React, Vue를 모두 사용하고 있고, 매우 주관적인 입장에서 한번 각각의 장단점을 서술해보려 한다.

React 장점 (Vue에 비해)

• 방대한 자료 및 잘 활성화 되어있는 커뮤니티.
  • 개발을 하다보면 막히는 부분, 오류가 있는 부분이 많은데 Vue에 비해 사용자가 많고, 역시 Facebook에서 만들었다보니 확실히 커뮤니티나 자료가 굉장히 방대하다. 즉 초기접근이 쉽다, 만약 webpack, JSX, state 관리에 대한 개념이 있다고 한다면 굉장히 빠른시간내에 web application을 하나 만들 수 있다고 생각한다.
• 타 프레임워크 와 관련된 boiler-plate.
  • 첫번째와 사실 비슷한 얘기인데, electron 과 같은 다른 framework에서도 금방 application을 만들 수 있게 boilerplate가 잘 만들어져 있다, update 및 issue 처리도 자주하는 걸로 보인다. electron-vue-boilerplate 경우.. 가장 최근 업데이트가 1년전이다. (issue에서는 dead project라는 것을 본적도 있다.)

React 단점 (Vue에 비해)

• JSX 기반 동작
  • 흠.. 이건 어떻게 보면 장점일 수도 있지만 개인적으로는 template 스타일이 훨씬 간결하고, 이해하기 쉬운 코드라고 생각한다.
• 높은 진입 장벽
  • 굉장히 주관적으로 Vue에 비해 어렵다고 생각한다. 3년전에 react로 처음 웹 개발을 시작했지만 webpack, JSX(html이 없는..? 방식), 상태관리(Redux..)에 의해 손절을 했던 기억이 있다.
    (요즘 해보니깐 별거 아니구나라는 생각이 들긴하지만.. 하하하)

---

React 설치 및 실행

react는 Vue와 마찬가지로 node 기반이며, npm으로 cli를 먼저 설치해주면 매우 쉽게 app 생성이 가능하다.
(이게 cli라고 보기는 힘들긴한데 .. 흠 vue-cli와 비슷한 느낌이라고 생각한다.)

npm install -g create-react-app
create-react-app react-test-project
cd react-test-project
npm start

---

파일 구조

├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

---

webpack 세팅

설치를 완료하고 react-test-project 폴더에 들어가보면 위와 같은 폴더 구조를 볼 수있다.
한가지 놀라웠던 것은 webpack.config.js가 보이지 않는다는 점인데 webpack 설정이 react-script 에 default로 되있고, webpack 설정을 따로 해주려면 package.json 수정과 webpack.config.js를 따로 만들어주면 되는 것으로 알고있다.

---

public

위 폴더에는 webpack으로 번들링된 js, css들을 load하는 html tag들을 추가해주는 index.html Entry point가 있고, static으로 사용되는 로고 같은 img들이 들어있다.
즉 고정 .css 파일 및 asset들을 보관하는 위치로 보인다

---

package.json

{
  "name": "react-test-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package.json을 보면 굉장히 깔끔하게 정리가 되있다. browerlist << 이건 처음 보는데 말그대로 지원되는 browserlist들로 보인다. 역시 default로는 IE가 지원이 안되는데, IE지원을 위해서는 polyfill 을 설치해야하는 것으로 보인다.
script들은, 개발을 위한 webpack-dev-server 열기와, 기본적으로 build 와 test가 있고 eject를 실행을하면, react-script << 위 모듈이 아닌 node 기반으로 app을 개발 및 빌드를 할 수있게 package.json 파일이 변경된다. 실제로 개발을 할 때에는 eject를 통해서 설정파일을 반드시 추출해야할 것으로 보인다.

---

src

먼저 entrypoint인 index.js를 살펴보자

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(, 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();

7라인을 보면, ./public/index.html의 body에 있는 div tag중 'root'라는 id를 가지는 부분을 기점으로 App.js에 있는 내용들이 렌더링 된다는 의미로 보인다.

마지막줄에 serviceWorker 객체가 나오는데, 대략적으로 background에서 동작하는 js를 실행시키고 제어하는 객체로 보면될 것 같다. 자세한 내용은 아무래도 따로 섹션을 빼서 다뤄야할 것으로 보인다. 푸시알림, offline상태에서의 동작등을 제어하는 것으로 나온다.

---

App.js

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

function App() {
  return (

     // 생략
  );

}

export default App;

Vue를 사용하다가 봤을 때는 위 구조가 조금 신선한데 html 코드에다가 js의 변수를 중괄호를 통해 매핑할 수있도록 해주고 매핑이 끝난 html코드를 function을 export해준다.
주의깊게 봐야할 점은 위 App() return type 이다. 얼핏보면, string이나 일반 object로 볼 수있다. 실제로도 typeof App()을 찍어보면 object로 나온다.
B.U.T 실제로 App()을 console.log로 찍어보면

$$typeof: Symbol(react.element)
key: null
props: {className: "App", children: {…}}
ref: null
type: "div"
_owner: null
_store: {validated: false}
_self: null
_source:
fileName: "/Users/sonjaerock/web/react-test-project/src/App.js"
lineNumber: 7

위와 같이 나온다. (여기서 드디어 Symbol type을 보게 되는구나..ㅋ) react.element라는 react만의 type을 가진다.
일반적인 object를 return한다기에는 해당 object가 가지는 default property 와 method가 많기 때문에 충분히 응용이 가능할 것으로 보인다.

---

그외

App.css : App component를 위한 local css file
Index.js : 전체 Application을 위한 global css file
App.test.js : test를 위한 파일
serviceWorker.js : 추후에 알아 보도록 하자.

---

마치며..

react를 시작했을 때 처음 상태에 대해서 알아보았다. 다음에는 어떻게 개발을 하는지에 대해 알아보도록 하자.