📝 CRA(create-react-app)

---

여태까지 만든 리액트 어플리케이션은 스크립트는 import해서 만들어야 했고 다 직접 했다.

리액트 어플리케이션을 만드는 최고의 방식 CRA!

create-react-app을 사용하면 ReactJS 어플리케이션을 만드는게 훨씬 쉬워진다. 왜냐하면 많은 스크립트와 사전 설정을 준비해 주기 때문이다.

create-react-app를 이용해서 어플리케이션을 만들면 개발 서버에 접근하거나, 자동으로 새로고침을 시켜주거나, 즉각적으로 어플리케이션 안에 CSS를 포함시켜 주는 등의 기능을 한다.

📝 준비

---

1. nodejs 설치
   추천하는 걸로 다운 받으면 된다.

2. 터미널에서 node -v 커맨드 확인해서 nodeJS 사용가능한지 확인

3. 터메널에서 npx 커맨드 사용가능한지 확인

📝 CRA Publish

---

1. 터미널에서 CRA로 어플리케이션 생성하기

npx create-react-app my-app(내 프로젝트 이름===디렉토리 명)

• 
• 

2. 터미널에서 VSC에서 작업할 디렉토리 열기

잠깐! code 명령어 사용해서 VSC 열 수 있도록 설정하고 가자 ..^ㅇ^
1. VSC 코드에서 cmd+shift+p로 명령 팔레트 열기
2. Shell Command: Install 'code' command in PATH 찾아서 설치

1. code 디렉토리 이름

2. package.json을 열어보면 실행할 수 있는 scripts가 자동으로 생성되어 있는 것을 확인할 수 있다.
   

3. npm start로 스크립트를 실행

1. npm start
2. 그러면 이렇게 개발용 서버(development server)가 만들어진다.
   
   이 모습이 create-react-app을 사용해서 어플리케이션을 만들었을 때 초기버전이다. ^3^~

👀 4. 살펴보기

1. src 폴더

• 앞으로 만들 파일은 모두 src폴더에 넣으면 된다.
  

2. index.js 파일

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

보다시피 자동으로 다 설치되어 있다.

create-react-app은 index.js가 내 어플리케이션(App)을 가지고 public/index.html 안에 넣어주도록 이미 설정되어 있다.

이미 자동으로 다 설정되어 있기 때문에 직접 뭘 안해도 된다 ^^!

심지어 auto-reload도 된다. 그래서 js에서 수정하고 저장하면 브라우저에서 새로고침 안해도 자동 새로고침 되어서 결과가 출력되니 편하다.

4. App.js 파일

App()은 함수 컴포넌트로 넣어져 있는 것을 확인할 수 있다.
함수 안에는 jsx로 뭐도 좀 써 있다.

❌ 5. 이제 기본 코드 몇 가지와 사용하지 않을 파일을 지워보자.

index.js 파일에서 코드 삭제하기

1. reportWebVitals 부분 삭제
   reportWebVitals는 리액트 성능 측정을 위한 파일로 개발할 대 이 파일 쓰는 일은 거의 없다고 한다.

2. index.css 삭제

3. 이렇게 기본만 있으면 된다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

App.js에서 코드 삭제하기

1. 로고 삭제
2. App.css 삭제
3. 사용하지 않을 jsx 부분 삭제
4. 이렇게 기본만 있으면 된다.

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

현재 nodeJS로 작업하고 있기 때문에 이렇게 파일을 각각 분리하는게 가능하다.
한 파일당 한 컴포넌트를 작업하면 되고, 그러고 나서 index.js에 import 되어 있는 App.js에서 작업한 컴포넌트를 import 하면 된다.

사용하지 않을 파일 삭제하기

1. App.css 파일 삭제
2. App.text.js 파일 삭제
3. index.css 파일 삭제
4. logo.svg 파일 삭제
5. reportWebVitals.js 파일 삭제
6. setupTests.js 파일 삭제

src 폴더에는 App.js 파일과 index.js 파일만 남기면 된다.

📝 CRA 구경하기

---

CRA에 익숙해 지기 위해 컴포넌트를 만들어 보자.

버튼 컴포넌트 만들기

위에서 언급했듯이 각각의 컴포넌트는 각각의 파일로 분리해서 만든 후 index.js로 import하면 된다.

1. src/Button.js 만들기

2. Button.js 파일에 Button 컴포넌트 코드 작성

Button 컴포넌트 prop으로 text를 주기 위해 { text }를 인자로 작성해 두면 된다.

function Button({ text }) {
  return <button>{text}</button>;
}

export default Button;

3. App.js에 Button import 하기

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>PTD in SEOUL</h1>
    </div>
  );
}

export default App;

• 🌟 여기서 npm start 해보면 아직 Button을 정의는 했지만 사용하지 않았기 때문에 warning이 뜬다. Button을 import해 왔지만 아직 사용하지 않기 때문에 뜨는 경고문이다. 이처럼 CRA는 코드를 더 잘 작성할 수 있도록 일종의 도움을 준다.
  

4. Button 컴포넌트 사용하기

App.js는 index.js로 export import 되어 있고 index.js에서 App을 랜더링 하고 있다.
따라서 Button 컴포넌트를 랜더링하기 위해 App에 넣으면 된다.

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>PTD in SEOUL</h1>
      <Button />
    </div>
  );
}

export default App;

• 🌟 보다시피 CRA를 사용한다고 해서 React 동작 방식에서 다른 것은 없다.
  CRA는 사전 설정을 좀 더 편하게 해준다.

5. Button 컴포넌트에 prop 사용하기

Button.js 에서 { text }를 인자로 보내려고 작성해 두었기 때문에 여기서는 text를 prop으로 작성하면 된다.

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>PTD in SEOUL</h1>
      <Button text={"HEY"} />
    </div>
  );
}

export default App;

• 🌟 VSC는 친절하게도 컴포넌트에 prop을 작성하기 위해 prop 이름을 적을려고 하면 아래처럼 필요할 것 같은 prop을 보여준다.
  

• 🌟 CRA로 코드를 작성하면 좋은 점이 개발 환경이 훨씬 좋다는 점이다.
  마우스를 Button 컴포넌트 위에 올려놓으면 Button 컴포넌트에 어떤 prop이 필요한지도 알려준다.
  

6. Checking the PropTypes

1. 콘솔 열어서 PropTypes install하기
   npm i prop-types

2. Button.js 파일에 prop-types로 부터 PropTypes import하기
   import PropTypes from "prop-types";

3. Button 컴포넌트에 PropTypes 설정하기

import PropTypes from "prop-types";

function Button({ text }) {
  return <button>{text}</button>;
}

//🔥 Button의 propTypes = { text: PropTypes은 string이고 필수여야 한다.}
Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

• 🌟 이처럼 props을 받아내는 방법도 그냥 리액트 사용할 때랑 똑같다.
  CRA로 작업하면 좋은 점은 각각의 컴포넌트를 각각의 파일로 코드를 분할하여 작업할 수 있다는 점이다.

🌟 그렇다 보니 특정 컴포넌트를 위한 CSS파일을 만들 수 있다.

📝 CRA로 CSS 작업하기

CSS로 작업하는 기존의 방법으로는 두 가지 옵션이 있다.

---

첫 번째 옵션

1. 한 개의 CSS파일(styles.css) 만들기

2. styles.css 파일에 CSS 작성
   버튼의 백그라운드 컬러가 토마토 색이 되도록 작성해 보자.

button {
  color: white;
  background-color: tomato;
}

3. index.js에서 CSS파일 import 해오기
   import "./styles.css"
   그러면 전체 버튼의 백그라운드 컬러가 토마토 색으로 변한다.

두 번째 옵션

CSS파일을 index.js에 import 하지 않고도 CSS를 사용할 수 있다.
만약 어떤 특정한 button의 백그라운드 컬러가 블루이길 원한다면,
모든 버튼의 백그라운드 컬러를 토마토 색으로 바꾸는 styles.css를 사용하지는 않을 거다.

1. style prop을 사용한다.

import PropTypes from "prop-types";

function Button({ text }) {
  return (
    <button
      style={{
        backgroundColor: "skyblue",
        color: "white",
      }}
    >
      {text}
    </button>
  );
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

하지만 global(전역적인) CSS style을 원하지 않는다고 이런식으로 js 파일 안에다가 style 코드를 작성한다면... 와우.. 유지보수하기에 쉽지 않을 거다.

CSS 파일이 적용하려고 하는 파일의 모든 부분에 import 되는 것을 원하지 않지만 직접적으로 style 코드도 넣기 싫다면 어떻게 하면 좋을까?
CSS modules을 사용하면 된다!

CSS modules 사용하기

1. Button.module.css 파일 생성
   CSS 모듈 동작을 활성화하려면 '파일이름.module.css'이라고 이름을 지정해야 한다.

2. 이 파일 내에서 btn 이라는 클래스 만들기

.btn {
  color: white;
  background-color: tomato;
}

3. Button.module.css 파일을 Button.js에 import 하기
   import styles from "./Button.module.css";
   Button.module.css 파일을 index.js에 import 하는 것이 아니라 Button 컴포넌트가 있는 Button.js 파일에 import 해준다.

4. button에 클래스네임을 입력한다.
   className={styles.btn}

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;

🌟 CRA는 CSS코드를 JS 오브젝트로 변환시켜준다.

Button.module.css파일에 적은 코드가 styles이라는 이름의 JS 오브젝트로 변환되었기 때문에,
styles.btn이라고 작성하면 Button.module.css파일에 적어 놓은 btn클래스의 CSS 코드를 가져와서 사용할 수 있다.

와우 진짜 어메이징...👏👏👏
나의 style들도 modular(모듈러)가 될 수 있는 매직!!!

🌟 그리고 class 이름이 랜덤하게 작성된다.

아래 class 이름을 보면 알다시피 내가 적은 btn이 아닌것을 확인 할 수 있음 ^3^..
그래서 동일한 class 이름을 다른 파일 내에서 사용해도 오류가 없다.
클래스 이름 기억할 필요가 없다. 랜덤하게 알아서 해주기 때문이다!

• CSS 모듈을 사용하면 다른 파일 내에서 같은 CSS class 이름을 사용하더라도 오류가 뜨지 않는다.

와우 진짜 어메이징...👏👏👏

CSS module 연습하기

App에 적용할 css 모듈을 만들어 보자.

1. App.module.css 파일 생성

2. 사이트 제목을 위한 css 코드 작성

.title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
}

3. import 하기
   import styles from "./App.module.css";

4. h1에 className 적용하기

import Button from "./Button";
import styles from "./App.module.css";

function App() {
  return (
    <div>
      <h1 className={styles.title}>PTD in SEOUL</h1>
      <Button text={"HEY"} />
    </div>
  );
}

export default App;

• 이제 각각의 컴포넌트를 위한 CSS를 만들 수 있고, 클래스 이름을 기억하기 위해 애쓸 필요도 없다! 클래스 이름 겹치게 사용해도 CRA가 알아서 랜덤하게 이름 바꿔주기 때문에 오류도 없다!

---

워우! 넘 신기혀 😇