1. CRA
Create React App(CRA)란 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 도구이다. React로 개발 프로젝트를 만들기 위해선 웹팩(Webpack), 바벨(Babel) 등 배워야하는 기술이 매우 많다.
이런 기술을 배우지 않고 React 애플리케이션을 바로 개발할 수 있는 Create React App이라는 CLI(커맨드라인 인터페이스)를 제공한다.
1.1 사전준비
CRA 실행을 위해 설치가 되어있어야 하는 것
- node.js
- npm
- npx
1.2 CRA 실행 명령어
npx create-react-app {app 이름}1.3 React App Start
npm start1.4 CRA 실행 폴더 구조
node_modules
- 관련 패키지가 들어있다.
public
- 화면에 실제로 출력되는 화면 파일이다.
- 안에 index.html이 있고, 코드를 짜서 DOM을 아래 div에 출력한다.
<div id="root"></div>src
- 작성하는 코드를 저장하는 폴더이다.
- Index.js가 코드를 DOM에 render(출력) 해준다.
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById("root")
)package.json
{
"name": "cra-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
- dependencies : 프로젝트를 진행하면서 사용할 패키지들
- scripts : 리액트를 실행할 때 사용하는 명령어
- eslintConfig : 스타일, 에러, 버그 같은 것들을 잡게 도와주는 linter
- browserlist : 브라우저와 호환성을 위한 것들
2. 번들링
Module
분리된 코드 조각
시스템을 이루는 논리적인 부분
Bundling
기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업
Bundler
여러 개의 파일을 묶어주는 도구
- Webpack, Borserify, Parcel 등이 있음
- 대표적으로 현재 가장 많이 사용되는 것이 Webpack 이다.
2.1 배경
// hello.js
var word = 'Hello';// world.js
var word = 'World';<html>
<head>
<script src="./source/hello.js"></script>
<script src="./source/world.js"></script>
</head>
<body>
<div id="root"></div>
<script>
document.querySelector('#root').innerHTML = word;
</script>
</body>
</html>두 js 파일에서 동일한 변수명을 사용했을 때, 두 변수가 충돌하고 마지막으로 호출한 js 파일에서 선언한 word만 적용된다.
모듈형 프로그래밍의 단점
- 전역 스코프를 오염시킨다.
- 예측하기 어려워진다.
프로젝트 규모가 점점 커지고, 협업 규모가 커지게 되면 이런 상황은 심각한 문제가 된다.
이런 문제를 해결하기 위해 클로저의 원리를 이용한 즉시실행함수 등으로 모듈을 구현한다.
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)
(function() {
// 코드
})()- 함수가 정의됨과 함께 즉시 실행된다.
- 내부에 정의된 변수는 외부 범위에서 접근할 수 없다.
- 즉시 실행 함수를 변수에 할당 시, 함수는 저장되지 않고 함수의 결과값만 저장된다.
하지만, JS의 활용을 브라우저에 국한하지 않고 범용적인 언어로 사용하고자 하는 움직임이 나타나면서 다른 라이브러리나 모듈을 적용시킬 수 있는 호환성, 표준이 필요해진다.
CommonJS
- 동기적
- 대표적으로 Node.js에서 사용한다.
- exports : 모듈 생성
- require() 함수 : 모듈 import
AMD
- 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표이다.
- define 함수가 스코프의 역할을 한다.
2.2 Bundler
Bundler가 사용되기 전의 문제점
- import/export는 구형 웹브라우저에서 동작하지 않음
- 프로젝트 규모가 커질 수록
- 서버와의 접속이 많을 수록 애플리케이션은 느리게 로딩됨. (네트워크 부하 발생)
- 서로 다른 패키지들이 서로 같은 변수나 함수를 사용하면서 예상하지 못한 충돌이 발생.
Webpack
- 가장 대표적인 번들러
- 한 글자를 수정해도 번들을 새로 만든다
3. npm(npx)
3.1 npm
npm은 node.js의 자동화된 의존성과 패키지 관리를 위한 패키지 매니저이다.
1. 패키지 실행
프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다. npm intall를 실행하기만 하면 원하는 패키지를 로컬(node_modules)에 설치할 수 있다.
- 버전관리 제공
npm은 패키지의 버전을 선택할 수 있기 때문에 패키지 버전 차이로 생기는 문제를 방지할 수 있다.
주의점
- 한 번 설치한 모듈을 계속 사용하기 때문에 업데이트 확인이 어렵다.
- 같은 모듈을 사용해도 프로젝트마다 다른 버전이 필요할 수 있기 때문에 버전 문제가 발생할 수 있다.
- 모듈 변경사항이 잦은 create-react-app 같은 보일러플레이트에서는 최신 버전 설치를 매번 해줘야 한다.
3.2 npx
npx란 5.2.0 버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구이다.
1. 패키지 설치
패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식이다.
- 실행시킬 패키지가 로컬에 저장되어 있는지 확인
- 존재하면 실행
- 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행
npx가 아닌 npm을 사용하면 패키지를 실행시킬 때 로컬에서 패키지가 위치한 경로로 실행시켜야 하거나, package.json의 script로 패키지의 경로로 정의해주어야 한다.
업데이트도 npm은 일일히 업데이트를 해줘야하기 때문에 create-react-app의 경우 npx를 이용해 설치하는 것을 권장한다.
4. 함수형 컴포넌트
컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 구분된다.
함수형 컴포넌트
function으로 정의하고 return 문에 jsx 코드를 반환한다.
import React from "react";
import "./App.css";
function NameBox() {
const name = "test";
return <div>{name}</div>;
}
export default NameBox;
이 때 function을 사용하지 않고 화살표 함수로 함수형 컴포넌트를 정의해도 된다.
import React from "react";
import "./App.css";
const NameBox = () => {
const name = "test";
return <div>{name}</div>;
};
export default NameBox;클래스형 컴포넌트
class로 정의하고 render() 함수에서 jsx 코드를 반환한다.
import React, { Component } from "react";
class NameBox extends Component {
render() {
const name = "react";
return <div className="react">{name}</div>;
}
}
export default NameBox;클래스형 컴포넌트에서는 state(상태)를 사용할 수 있으며 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트 혹은 언마운트 될 때 추가 작업을 수행시키는 등 조작을 할 수 있었다. 하지만 Hook이 등장한 이후부터는 위 기능들을 함수형 컴포넌트에서도 대부분 구현이 가능하게 되었다.
5. JSX
JSX는 자바스크립트에 XML을 추가한 확장 문법으로 브라우저에서 실행되지 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
function App(){
return (
<div>
Hello <b>react</b>
</div>
);
}위의 코드는 아래와 같이 변환된다.
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}JSX를 사용하면 매우 편하게 UI를 렌더링 할 수 있다.
리액트로 프로젝트를 개발할 때 사용되며 공식적인 자바스크립트 문법은 아니다.
2회차 학습 키워드들을 깔끔하게 정리해주셨네요!!
미션과 관련된 피드백은 아래 링크를 통해 확인해주세요. 확인해보시고 질문 있으시면 언제든지 편하게 주시면 됩니다.😀
https://gist.github.com/moonhopark/f7eebd80114c7f9b2069bc088fe867a5