Create React App(CRA)란 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 도구이다. React로 개발 프로젝트를 만들기 위해선 웹팩(Webpack), 바벨(Babel) 등 배워야하는 기술이 매우 많다.
이런 기술을 배우지 않고 React 애플리케이션을 바로 개발할 수 있는 Create React App이라는 CLI(커맨드라인 인터페이스)를 제공한다.
CRA 실행을 위해 설치가 되어있어야 하는 것
npx create-react-app {app 이름}
npm start
node_modules
public
<div id="root"></div>
src
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"
]
}
}
Module
분리된 코드 조각
시스템을 이루는 논리적인 부분
Bundling
기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업
Bundler
여러 개의 파일을 묶어주는 도구
// 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
AMD
Bundler가 사용되기 전의 문제점
Webpack
npm은 node.js의 자동화된 의존성과 패키지 관리를 위한 패키지 매니저이다.
1. 패키지 실행
프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다. npm intall를 실행하기만 하면 원하는 패키지를 로컬(node_modules)에 설치할 수 있다.
주의점
npx란 5.2.0 버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구이다.
1. 패키지 설치
패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식이다.
npx가 아닌 npm을 사용하면 패키지를 실행시킬 때 로컬에서 패키지가 위치한 경로로 실행시켜야 하거나, package.json의 script로 패키지의 경로로 정의해주어야 한다.
업데이트도 npm은 일일히 업데이트를 해줘야하기 때문에 create-react-app의 경우 npx를 이용해 설치하는 것을 권장한다.
컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 구분된다.
함수형 컴포넌트
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이 등장한 이후부터는 위 기능들을 함수형 컴포넌트에서도 대부분 구현이 가능하게 되었다.
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