5.1 Tour of CRA

먼저 Button을 한번 만들어보자.

그러고 App.js에 아래와같이 import로 Button을 가지고 오면콘솔창에 아래와 같이 경고창이 뜨는데, 이것이 create-react-app의 우리를 도와주는 기능 중 하나라고 생각하면 된다.

 

이것은 import로 Button을 불러왔지만, Button을 사용하지 않았기에 발생한 경고이다.

그럼은 Button을 사용해보자.

 

다음과 같이 t만 쳐도 어떤 prop을 가지고 오는지 알려주는데 이또한 장점 중 하나이다!

Button에 마우스만 올려도 어떤 prop을 가져와야하는지 잘 알려준다.

App.js

import Button from "./Button";

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

export default App;

다음과 같이 정상적으로 button을 가져온다.

 

 

 

 

 

다음으로 prop-types를 설치하여 검사도 해보자.

다음의 명령어로 prop-types를 설치하자

npm i prop-types

그리고 import하여 한번 검사해보자.

import PropTypes from "prop-types";

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

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

export default Button;

 

 

 

 

CSS를 사용하는 방법은 두가지가 있다.

 

1. CSS파일 만들기

먼저 styles.css파일을 만들어보겠다.

그럼 이를 index.js로 가서 import를 하자.

그럼 다음과 같이 버튼이 토마토 색으로 변한것을 확인할 수 있다.

이건 아주 간단한 방법이다.

 

근데 index.js파일에 무조건적으로 css파일을 import할 필요는 없다.

 

 

2. Style prop사용하기

import를 삭제하고

아래와 같이 style prop을 사용하면 된다.

근데 이렇게 하면 모든 button에 이렇게 적용해야하고, css의 장점을 살릴 수 도 없기 때문에 대체로 사용하지 않는다.

 

 

 

 

 

 

 

divide-conquer이 중요한것이다.

 

그럼, styles.css가아닌 Button.module.css로 파일명을 변경하자!

Button.module.css 내에서 btn이라는 class를 만들어보자.

그리고 Button.module.css를 index.js에 import하지 않을 것이다.

대신 Button.js에 import할것이다.

이것이 진짜 멋진 CSS다!!!

그럼 정상적으로 토마토색 버튼이 생기고

class는 무작위적인 random class를 갖는다는 것을 알 수 있다.

 

이 동일한 class이름을 다른 파일 내에서도 사용할 수 있다.

 

자 그럼 App을 위한것이니까

App.module.css라고 이름을 지어보자!

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

그럼 다음과 같이 잘 적용된 것을 알 수 있다.

 

이렇게 랜덤하게 이름을 지어줌으로

우리는 동일한 calss명을 주어도 기억할 필요가 없고 랜덤으로 생성해주기 때문에 편히 사용하면 된다.