🔎 Create React App

1. Create React App

Create React App은 리액트 어플리케이션을 만드는 최고의 방식으로 수많은 스크립트와 사전 설정들을 미리 준비해준다.

개발 서버에 접근하거나 자동으로 새로고침 또는 즉각적으로 css 적용 등의 기능들이 있다.

일단 먼저 node.js가 설치되어야 한다.

nodejs.org에서 os에 맞는 nodejs를 다운받자.

그리고 터미널에서 node -v를 입력해 제대로 설치가 되었는지 확인하자.

이후 터미널에 npx create-react-app 폴더명 을 입력해 폴더를 생성하고 npm start를 입력해 개발 서버가 열림을 확인하자.

src 폴더에서 불필요한 파일들을 지우고 index.js 와 App.js만 남기자. (App.test.js, App.css, index.css, logo.svg, reportWebVitals.js, setupTests.js 삭제)

index.js 파일을 열어서 불필요한 코드는 지우자.

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도 다음과 같이 만들자.

function App() {

return (

<div>

<h1>welcome!</h1>

</div>

);

}

export default App;

이제 기본적인 세팅이 끝났다. npm start를 입력하여 welcome! 문구가 뜨는 것을 확인하자.

여기까지 완료되었다면 이제 본격적으로 리액트 어플리케이션을 만들 수 있는 환경이 완료된 것이다.

이제 터미널에 npm i prop types 를 입력해 Prop Types를 설치하고 완료되면 type을 정의할 파일 맨 위에 import 해주자.

2. seperate component

이번엔 create-react-app의 장점인 분할을 해보자.

먼저 컴포넌트를 각각 분리하고 App에 연결해보자.

예시로 Button 함수를 가진 Button.js 파일을 만들자.

마지막에 export를 해서 Button을 App.js에서 쓸 수 있도록 하자.

import PropTypes from "prop-types";

function Button({ text }) {

return <button>{text}</button>;

}

Button.propTypes = {

text: PropTypes.string.isRequired,

};

export default Button;

App.js에서 import 해주고 App에서 Button을 사용하자.

import Button from "./Button";

function App() {

return (

<div>

<h1>welcome!!!</h1>

</div>

);

}

export default App;

3. CSS

이번엔 css를 연결에 대해 알아보자.

컴포넌트별 스타일의 파일명은 아무거나.module.css 로 하면 된다.

1. 첫 번째 방법은 직접 연결하는 것이다.

css 파일을 만들고 index.js에서 import하면 된다.

import "./style.css";

이 방법은 아주 편하고 간단하다.

하지만 만약 css 파일에서 button 태그의 스타일을 넣어줬다면 전역 스타일이므로 모든 button 들에 적용이 될 것이다.

만약 button 마다 다른 스타일을 적용하고 싶다면 이는 적합한 방법이 아니다.

2. 두 번째 방법은 각 태그에 직접 style을 추가해주는 것이다.

하지만 이는 모든 태그마다 추가해줘야하기 때문에 비효율적이고 반복이 많다.

3. 세 번째 방법을 사용해보자.

먼저 Button.modules.css 파일을 만들자.

.btn {

color: white;

background-color: sandybrown;

}

Button.js를 다음과 같이 수정하고 저장하자.

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;

create-react-app은 css를 js오브젝트로 변환시켜준다.

따라서 위의 코드에서 js오브젝트에 해당하는 styles는 btn을 안에 가지고 있게 된다.

그리고 원하는 button 태그에 className만 추가해주면 css가 적용된다.

콘솔창에서 확인해보면 html에서 class 이름이 랜덤인 것을 확인할 수 있다.

이제는 동일한 class, id, btn 등을 다른 파일 내에서도 사용할 수 있게 된다.

이는 create-react-app의 큰 장점이라 할 수 있다.

style을 module화 시킨 거라고 볼 수 있기 때문이다.

기존의 "어떤 class나 id에 적용할 스타일"이 아닌 "특정 jsx element에 적용할 스타일"로 생각할 수 있다.

이처럼 create-react-app는 컴포넌트와 스타일들을 독립적으로 유지시켜주며 개발자들에게 큰 도움이 된다.