[React] 4. Create React App

1. Vue 처럼 React 에서도.

---

• 맨 처음 vue를 배울 때, html의 script부분에 링크를 달아서 CDN방식으로 사용한 경험이 있다.

• React도 처음에 그렇게 배웠다.

• vue-cli방식으로 넘어간 것처럼, react도 create-react-app이라는 방식이 있다.
  • npx create-react-app <app-name>의 형식으로 만든다.

2. 장점?

---

1. 컴포넌트의 분리

   예전에 CDN방식을 사용한 것과 다르게, 목적에 따라 js파일을 분리해서 사용할 수 있다.

2. css의 사용

   니꼴라스 선생님이 “super cool 😎” 한 부분이라고 강조한 것이 있다.

   바로 평소에 css에 class를 사용했으면 중복되지 않기 위해서 꼭 클래스 이름을 기억해야 했다.

   (클래스 이름 짓는 것도 일이다.)

   하지만 React에서는 다르다~

   App.module.css

   .title {
       font-family:Verdana, Geneva, Tahoma, sans-serif;
       font-size: 18px;
   }

   App.js

   import styles from "./App.module.css"
   
   function App() {
     return (
       <div>
         <h1 className={styles.title}>Welcome back to React</h1>
       </div>
     );
   }
   
   export default App;

   css 이름에는 꼭 ~.module.css처럼 이름을 지어주어야 한다. 그리고 class가 아닌 className을 이용해야 하는 것도 특징!

   

   개발자 도구를 열어 확인해보면 class이름은 random으로 지어주는 것을 확인할 수 있다.

   예전에 관통프로젝트를 진행하면서 왓챠피디아 홈페이지를 들어갔는데, 거기에서 class이름이 정말 맘대로길래 속으로

   ‘여기는 왜 클래스 이름이 이렇지?’

   라고 생각했었는데, 지금와서 생각해보면 React가 그렇게 만들어 준 거구나 싶다.

Uploaded by N2T