📝 오늘 한 것

1. CREATE REACT APP

📚 배운 것

1. CREATE REACT APP

1) 리액트 프로젝트 생성

create-react-app으로 리액트 프로젝트를 생성할 수 있다.

• 터미널에서 다음과 같은 명령어를 실행한다.

$ npx create-react-app [생성할 폴더 이름]

• VS code로 해당 폴더를 연다

$ code [생성한 폴더 이름]

• VS code 내장 터미널에서 다음과 같은 명령어를 입력하면 브라우저에 create-react-app의 기본 페이지가 뜬다.

// package.json 파일 참고
$ npm start

2) 특징

• src 폴더에는 작성할 모든 코드들을 담아야 한다. React JS는 이를 public 폴더의 index.html 파일 안의 <div id="root"></div> 안에 넣어준다.

• VS code에서 코드를 수정한 후 저장하면 브라우저에서 페이지를 새로고침 하지 않아도 자동으로 업데이트된다.

• Node.js를 이용해 작업하기 때문에 하나의 파일당 하나의 컴포넌트만을 가지도록 한 후 그 컴포넌트를 index.js 파일에서 inport 할 수 있다.

3) 작업 환경 구축

src 폴더에서 가장 핵심이 되는 파일은 React 앱을 렌더링해주는 index.js 파일이다.
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")
);

App.js 파일에서도 필요 없는 코드들을 삭제하여 다음과 같이 수정했다.

function App() { // App 컴포넌트
  return <div>Welcome back to React!</div>;
}

export default App;

src 폴더에서 index.js 파일과 App.js 파일만 남기고 나머지 모든 파일들을 삭제한다.

4) 컴포넌트 추가

(1) export default & import / prop 사용

Button.js 파일에 Button 컴포넌트를 만든 후 export default 했다.

App.js 파일에서 Button 컴포넌트를 import 한 후 이를 App 함수가 return 하는 div 태그 안에 넣었다.
(만약 import 한 후 사용하지 않는다면 React가 콘솔에 경고를 띄워준다.)

(2) PropTypes

prop-types를 설치한다.

$ npm i prop-types

Button.js 파일에서 prop-types를 import 한 후 이를 사용한다.

// Button.js
import PropTypes from "prop-types";

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

5) CSS modules

create-react-app(이하 cra)로 작업할 때 CSS를 추가하기 위해서는 3가지 옵션 중 하나를 선택할 수 있다.

(1) styles.css 파일을 index.js 파일에서 import

첫 번째 방법은 src 폴더에 오직 하나의 CSS 파일을 만드는 것이다.

// styles.css
button {
  background-color: lightblue;
  color: white;
}

작성한 스타일을 적용하기 위해 index.js 파일에서 styles.css 파일을 import 한다.

// index.js
import "./styles.css";

그러나 이렇게 하면 cra 앱 안의 모든 button에 대해 해당 스타일이 전역적으로 적용되고 만다.

(2) props 사용

Button 컴포넌트에 style 속성을 추가한다.

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

그러나 이렇게 하면 모든 버튼마다 따로 스타일을 추가해줘야 한다.

(3) CSS modules

src 폴더 안에 Button.module.css 파일을 생성한다.
해당 파일에 여러 버튼들에 적용할 스타일들을 선택자 등을 이용해 구분해 작성한다.

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

Button.js 파일에서 Button.module.css 파일을 import 한 한다.
Button 컴포넌트가 return 하는 button 요소에 class를 추가한다.

이때 import 및 class 추가는 다음과 같이 해야 한다.
실제로 개발자 도구에서 Elements 탭을 확인해보면 무작위 랜덤 class가 부여되는 것을 확인할 수 있다.

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

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

✨ 내일 할 것

1. EFFECTS