Cra
Create-React-App
What is Create-React-App
Create-Reacte-App은 React를 더 쉽게 도와주는 도구이다. 일반적으로 CRA라는 약어로 칭한다.
Facebook, 즉 지금의 Meta가 이 도구도 지원하는데, 무엇을 도와주냐면
- 자동으로 변경사항 반영 (새로고침 할 필요가 없다.)
- 서로 다른 파일들로 코드를 분할 가능(Node.js 덕분)
- 특정 Component를 위한 CSS파일 제작가능(module.css)
CRA는 Divide and Conquer한 방식으로 프로그래밍을 할 수 있게 해준다.
How to use CRA
터미널에 아래 코드를 실행하게 되면 (node.js와 npx가 설치되어 있어야 한다.)
$ npx create-react-app your-app-name-here
your-app-name-here에 여러가지의 파일이 생성된다.
그 중 package.json 파일에 대해 알아보자
{
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
...
}
scripts는 사용할 수 있는 명령어를 별명으로 실행할 수 있게 해주는데, 예를 들어 터미널에
$ npm start
라고 입력하면 개발용 서버가 작동되면서 실제 웹사이트를 모습을 보면서 작업할 수 있게 된다.
또한, src라는 폴더가 보일텐데, 이것이 우리가 source를 만들고 집어 넣을 곳이다.
Prop Types
Prop의 타입을 검사해주는 놈도 install 해줄 수 있다.
$ npm install prop-types
참고로 이 명령어를 입력하면 추가로
174 packages are looking for funding
run `npm fund` for details
12 vulnerabilities (5 moderate, 7 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
이런 류의 모듈의 취약점을 검사해준다는 로그가 나오는데, 반드시 무시하고 지나가자.
npm audit fix ~~ 라고 치는 순간 프로젝트가 구동 안될 수 있다.
이거 안해도 Prop Types을 쓰는데는 문제가 없으므로 그냥 무시하자.
사용법은 이전에 설명한 대로 다음과 같이 쓰면 된다.
function Button({ text }) {
return <button>{text}</button>;
}
Button.propTypes = {
text: PropTypes.string.isRequired, //text는 string타입이면서 반드시 있어야하는 Prop
};
CSS Module
CPA는 앞서 말했듯이 divide and conquer 철학에 따라 많은 것들을 분리하여 재사용성을 높인다고 말했는데, 단순히 html js만 그것이 가능한 것이 아니라, 심지어 css까지도 분리가 가능하다.
css를 적용할 수 있는 3가지 방식을 비교하며 css module이 가지는 이점을 느껴보자.
Method : CSS Property
function App() {
return (
<button style=></button>
);
}
위와 같이 버튼에 스타일을 입히려면 위와 같이 html 태그와 같이 써주는 방식이 있을 것이다.
이건 간단한 예라서 그렇지만 만일 버튼 하나하나를 꼼꼼히 만들어주어서
function App() {
return (
<button style=></button>
);
}
이렇게 많은 속성 값을 가지게 된다면, 그리고 이런 버튼이 하나가 아니라 여러 개라면 우리의 코드는 css로 도배가 될 것이다.
그렇다면 다른 방식은 어떤게 있을까?
Method : CSS File
아예 button.css 파일을 만들어서, 이를 import 시키는 방법도 있을 것이다.
CRA가 없을 때 코드를 가장 분리형으로 작성할 수 있는 방법이다.
//Styles.css 파일
.myButton {
background-color: pink;
}
그렇지만 이 방법은 모~든 MyButton을 가진 버튼의 색깔을 동일하게 바꿀 것이고, 항상 myButton이라는 클래스명을 기억해야 한다는 단점이 있다.
또한 여러 CSS파일을 import하다가 같은 이름의 클래스명을 쓴다면 또 문제가 될 것이다.
자 이제 CRA만의 방법을 알아보자.
Method : CSS Module
Style도 모듈이 될 수 있다는 개념에서 출발하면 된다.
Button.module.css 파일을 만들고 아래와 같이 작성하자.
//Button.modules.css
.btn {
color: white;
background-color: tomato;
}
그리고 이를 이용하기 위하여 Button.js 파일에서 불러오고 className 속성을 이용하면 된다.
//Button.js
import PropTypes from "prop-types";
import styles from "./Button.module.css";
function Button({text}){
return <button className={styles.btn}>{text}</button>
}
Button.propTypes = {
text:PropTypes.string.isRequired,
}
export default Button;
이 방식을 취하면 Styles. 까지만 쳐도 자동완성이 되면서 모든 클래스명을 기억하지 않아도 될 뿐더러,
만일 다른 파일에도 같은 클래스명을 가진 스타일이 있더라도 그것은 import되지 않았기 때문에 오류도 나지 않는다.
CRA는 CSS 코드를 JS오브젝트로 변환시킨다.
이를 이용해 Style을 모듈화해서 적용할 수 있다.
그리고 이떄 class명은 랜덤하게 정해진다. (다른 파일에서 중복된 class명 사용돼도 상관없음)
참고삼아 모든 파일들을 살펴보자.
//App.js
import Button from './Button';
import styles from './App.module.css'
function App() {
return (
<div>
<h1 className={styles.title}>Welcome to React!</h1>
<Button text={"continue"}/>
</div>
);
}
export default App;
이 App.js는 App component를 만들때 스타일을 적용해주기 위해 ./App.module.css파일을 로드했다.
이 파일은
//App.modules.css
.btn {
color: white;
background-color: tomato;
}
이렇게 정의되었다.
이해를 돕기 위해서 structure를 그려보았다.
정리
- Create-React-App, 즉 CRA은 react의 다양한 초기 설정들을 자동으로 구현해준다.
- CRA는 또한 divide and conqure 프로그래밍을 지원한다. 특히 CSS도 모듈화하여 스타일을 편하게 적용할 수 있다.
- 따라서 CRA는 React를 한다면 반드시 알아야할 도구이다.
Leave a comment