노마드코더 ReactJS로 영화 웹 서비스 만들기 5 (CRA)

딩쓰·2022년 12월 16일

CRA React proptypes

노마드코더 ReactJS로 영화 웹 서비스 만들기

목록 보기

5/8

#5.0~ 5.1

CRA(CREATE REACT APP)

Node.js를 이용해서 create-react-app을 만드는 방법을 공부해 볼거임
create-react-app을 사용한다면 수많은 스트립트들과 많은 사전설정들을 React에서 준비해줌.

일단 Node.js에서 Node.js를 다운받고, 밑에처럼 버전이 확인하면 설치된거임!

이제 npx create-react-app 폴더명 명령어로 React 폴더를 생성해주자!

npm start

설치가 완료되면 vs코드로 폴더를 열어줌
터미널을 열어서 npm start라고 명령어를 입력하면 됨

그럼 아래처럼 브라우저 새창으로 development server(개발용 서버)가 띄어짐!

초기 세팅

처음에는 파일이 많이 세팅되있는데 필요한 것만 남기고, 다 지워줌.
App.js와 index.js만 남기고 다 삭제하기

필요없는 내용들을 삭제해줌.

Button 컴포넌트 생성

//Button.js
import propTypes from 'prop-types';

function Button({text}) {
  return <button>{text}</button>
}
Button.propTypes = {
  text: propTypes.string.isRequired,
}

// 외부로 export 하기 위한 코드
export default Button;

Button.js 파일을 생성 후, Button컴포넌트를 만들어 주었다.
외부로 export하기 위해서는 export default Button; 를 작성해야함.

//App.js
import Button from "./Button";

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

export default App;

App.js div태그 안에 Button 컴포넌트를 추가해줌

propTypes 다운받기

//Button.js
import propTypes from 'prop-types';

function Button({text}) {
  return <button>{text}</button>
}
Button.propTypes = {
  text: propTypes.string.isRequired,
}

// 외부로 export 하기 위한 코드
export default Button;

버튼 컴포넌트의 prop-types로 타입을 체크하기 위해 npm i prop-types 명령어로 설치하고
import propTypes from 'prop-types' 해준다.
CRA하기 전에 했던 것과 똑같은 코드를 쓰지만 setup(설치 및 초기설정)만 다름.

이렇게 자동완성 기능으로 여러가지 옵션을 선택할 수 있음.

CSS 적용하기

CSS에 관한 선택지를 가질 수 있는데

1. 외부 스타일 시트

한 개의 css파일(style.css)을 만들어서 index.js로 가서 import './style.css' 하는 방법
하지만 외부 스타일 시트를 사용하면, 내가 꾸미고 싶지 않은 button에도 스타일이 적용되서 React를 사용하는 이유가 없어짐. 그래서 pass~

2. 인라인 스타일

import propTypes from 'prop-types';

function Button({text}) {
  return (
  <button style={{
    backgroundColor: "tomato",
    color: "white",
  }}>{text}</button>
  );
}
Button.propTypes = {
  text: propTypes.string.isRequired,
}

// 외부로 export하기 위한 코드
export default Button;