노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #5 Create React App

이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!)

 

 이제 본격적으로 script로 불러오는 방식이 아닌 react app을 만들어 본격적으로 react를 사용해 볼까 한다. react app을 creat 하는 도중에 npm install error ENOENT라는 작은 에러를 만났다. 

 우선 기존에 깔려 있던 node.js를 재 설치 한 후 댓글에 있는 방식으로 앱생성을 진행하였다. 

 생성한 폴더에서 터미널을 열고 node -v을 입력해 node.js의 설치를 확인했다. 그리고 px create-react-app . 을 입력 후 y를 눌러서 설치를 시작했다.

 설치가 끝나니 여러가지 폴더와 파일들이 생성되었다!

터미널에서 npm start를 입력하니 개발용 서버가 만들어졌다. 

 

 index에서 필요없는 구문들을 지우고 완전 처음부터 시작할 준비를 하였다.

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

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

 App.js도 필요 없는 것들을 지우고 react app에는 index.js와 App.js를 남긴 후 모두 삭제해 초기 설정을 해주었다.

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

export default App;

 아주 심플해 졌다.

 이제 새 도화지가 완성되었다.

먼저 Button을 하나 만들어 보자. src폴더에 우클릭을 해 새 파일을 만들어주고 Button을 생성하였다.

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

그리고 App.js에 import 해주었다.

import Button from "./Button";

여기서 리엑트를 실행하면 오류 문구를 볼 수 있는데, 사용하지 않은 함수를 알려주는 것 같았다.

Button을 App()에 등록해 주고 실행을 하면 오류 메시지가 사라진다.

import Button from "./Button";

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

export default App;

 이제 text props를 넘겨야 하는데 그전에 props type을 체크하기 위해 props-type을 설치해야 한다. 터미널을 열고 npm i prop-types를 입력한다. 설치가 완료된 후 Button에 import 해주고 props-type을 설정해 준다.

import PropTypes from "prop-types"; 

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

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

export default Button;

 이 Button에 css를 입혀 주려고 한다. 기존에 사용하는 방법은 공통적인 style.css에 모든 css를 작성한 후 html에 import 해서 적용시키는 방법과 직접적으로 <button style={}>처럼 태그 자체에 style을 삽입하는 방식이 있었다. 하지만 여기서는 이러한 방식을 쓰지 않고 css를 모듈화 시킬 것이다. 

src 폴더에 Button.module.css라는 파일을 생성해 준다. 여기에 button에 들어갈 css를 클래스명과 함께 작업해 준다.

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

그리고 Button.js에 이 css를 import 시켜준다.

import styled from "./Button.module.css"

버튼의 class name을 import 시킨 styled.btn으로 입력해 주면 나의 버튼에 css가 적용된다!

이제 동일한 class이름을, btn을, 다른 파일 내에서도 사용할 수 있다. 그리고 react는 이러한 className을 랜덤 하게 만들어준다. (갑자기 예전 나의 주렁주렁 붙은 btn의 class-name과 id가 생각이 났다...)

 

이제 App에 있는 title을 위한 css를 작업해 보자.

src 폴더에 App.module.css를 생성해 주고 css를 작성한다.

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

App.js에 import 해 주고 h1의 class name을 바꿔준다.

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

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가 잘 적용된 것을 볼 수 있다. 이 class name 또한 랜덤 하게 추가 문자가 붙어 있는데 이러한 react의 기능 덕분에 우리는 동일한 css를 독립적으로 각각 모듈처럼 쓸 수 있다. 그렇게 때문에 button에 똑같은 class name의 class를 넣는다 해도 아무 문제가 없다.

 

git : https://github.com/leesulgi66/React_for_Beginners/commit/38b6d663dca20957f94c46cd52b9c448c2c56d3f