[영화 웹 서비스 만들기] #7. Create REACT App

~5.1까지의 강의

 

create-react-app을 사용한다면, 어플리케이션을 만듦에 있어 훨씬 쉬워질 것이다. create-react-app이 엄청나게 많은 스크립트와 사전 설정이 있기 때문이다.

 

시작하는 거 정리할 겸 나름 자세하게 적었음

 

1. nodejs 다운로드

node -v : 있는지 버전확인 가능함

 

2. npx 작동

이런식으로 나옴

 

3. npx create-react-app react-movie-service

react-movie-service 자리에 자기가 원하는 이름을 적어주면 된다.

이렇게 하면 react-movie-service라는 이름을 가진 리액트가 생성되는데, 그 전에 저장될 공간을 옮기자~

 

4. code react-movie-service

vs코드에서 열기

 

참고) package.json으로 가면 실행시킬 수 있는 스크립트 확인 가능함

 

실행은 npm run start or npm start

그동안 코드짜느라 바빠서 못 봤던 리액트 기본 설정

 

 

src

src 폴더는 나의 모든 파일들을 넣을 폴더, 모든 게 다 src 폴더 안에 있어야 한다.

헷갈리지 말고 머리에 새겨두자!! Next.js의 악몽

 

 

NodeJS라서 분리할 수 있다. 즉, 파일당 한 component고 연결된 곳에서 import 시켜서 사용한다.

 

---

여기까지는 사실 정리할 것도 없지만, 그래도 추후 나의 기억력을 위해^^ (css 생략)

 

index.js

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


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

앞선 강의에서는 모든 script를 태그 형식으로 가지고 와줬는데, 이제는 그냥 import만 하면된다. 

<App /> -> App으로 이동, 이것을 위해서 App을 import 해준다.

 

App.js

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

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome back!!!</h1>
      <Button text={"Continue"} />
    </div>
  );
}

export default App;

css는 생략

<Button />-> Button으로 이동, 이것을 위해서 Button을 import 해준다.

 

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.title}>{text}</button>;
}

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

export default Button;

앞에서 propType 보려고 했던 것 처럼, 여기도 마찬가지로 보고 싶다.

먼저 npm i~로 설치해준 후에, import해줌

 

 

export defalut

변수나 함수, 클래스를 선언할 때 맨 앞에 export 를 붙이면 내보내기가 가능하다. 그냥 쉽게 import의 반대라고 생각하자. 근데 defalut는 왜?

export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다.

더 정확한 설명은

https://ko.javascript.info/import-export#ref-4122

 

결론 : create-react-app을 사용한다면, 서로 다른 파일로 코드들을 분리할 수 있다. 포인트는 Divide & Conquer