📌 create react app 사용해보기
1. 다음과 같이 Button.js 파일을 생성하여 Button 컴포넌트를 작성한다.
function Button({ text }) {
return <button>{text}</button>;
}
export default Button; // Button 컴포넌트를 App.js에서 사용할 수 있게 하기 위해 export default Button을 해 주었다.
2. App.js에 Button 컴포넌트를 불러와서 App 컴포넌트에서 사용해 본다.
import Button from "./Button";
function App() {
return (
<div>
<h1>Welcome back!</h1>
<Button />
</div>
);
}
export default App;
만약 Button 컴포넌트를 import 하기만 하고 App 컴포넌트 내부에서 사용하지 않고 npm start를 하면 create react app은 그 사실을 터미널창에서 알려준다. 이렇게 create react app은 우리에게 도움을 준다.
3. Button 컴포넌트의 props로 text를 전달해 본다.
function App() {
return (
.....
<Button text={"Continue"} />
.....
Button의 text값으로 "Continue"가 전달되고 이것은 Button 컴포넌트에 적혀 있는 대로 버튼 안의 텍스트로써 반환되고 화면에 랜더링되게 된다.
4. prop-types 설치하기
터미널(node)에 다음과 같이 입력하여 prop-types를 설치한다.
npm i prop-types
5. PropTypes import하기
import PropTypes from "prop-types"; // 주목!
function Button({ text }) {
return <button>{text}</button>;
}
Button.propTypes = {
// 주목!
text: PropTypes.string.isRequired,
};
export default Button;
prop-types를 PropTypes라는 이름으로 import하여 text에 대한 prop-type(string)을 이전과 같은 방법으로 설정했다.
6. css 작성하기
우선 다음과 같이 css를 작성한다.
button {
color: white;
background-color: tomato;
}
css를 적용시키기 위해서는 index.js 파일에 해당 css 파일을 import하면 된다.
import "./styles.css";
but 위와 같은 방식으로 css를 사용하면 해당 css가 Button 컴포넌트에서 반환되는 button 뿐만 아니라 모든 버튼에 적용이 되어 모든 버튼의 색을 토마토색으로 만들어 버릴 것이기 때문에 위와 같이 styles.css를 사용하지 않을 것이다.
대신 아래와 같이 style prop을 이용하여 스타일을 적용할 것이다.
7. style prop 작성하기
Button 컴포넌트에 style prop을 추가한다.
function Button({ text }) {
return (
<button
style={{
// 주목!
backgroundColor: "tomato",
color: "white",
}}
>
{text}
</button>
);
}
결과는 css 파일을 import 했을 때와 같고, 다른 점은 html을 보면 button tag에 우리가 작성한 style 속성이 그대로 나타나 있다는 것이다.
따라서 전역적인(global) CSS style을 원하지 않는다면 위와 같이 style prop을 적용할 수 있다.
create react app으로 작업할 때의 포인트는 '분할'하고 '정복'하는 것이다.
8. CSS modules 알아보기
앞에서 만든 styles.css 파일의 이름을 Button.module.css로 바꾼다.
(파일명.module.css 형식을 지키는 것이 중요!)
우리는 Button.module.css 내에서 btn이라는 클래스를 만들어 볼 것이다.
.btn {
color: white;
background-color: tomato;
}
이 css 파일은 index.js에 import 하지 않고, Button.js에 import 시켜준다.
import styles from "./Button.module.css";
이렇게 하면 이제 className 속성을 통해 class 이름을 내 버튼에 추가하는 것이 가능하다.
function Button({ text }) {
return <button className={styles.btn}>{text}</button>;
}
styles 에서 btn 클래스를 가져오는 것이므로 {} 안에 점 표기법으로 적어주었다.
우리는 Button.module.css 파일에 css 코드를 작성하였고, create-react-app은 이 CSS 코드를 js 오브젝트로 변환하는 역할을 수행한다. 그 js 객체 안에 btn(css 클래스)이 들어 있는 것이다.
버튼의 색깔과 글자의 색깔은 여전히 이전과 같은 것을 볼 수 있다.
html을 살펴보면 "Button_btn__FQRqs"과 같은 랜덤한 class 이름이 button tag에 적용되어 있는 것을 볼 수 있다.
이제 동일한 class 이름인 btn을 다른 파일 내에서도 사용할 수 있다. 하지만 동일한 class 이름을 사용해도 create-react-app은 랜덤한 클래스 이름을 생성하여 실제 html에 적용해 줄 것이다.
9. 어플리케이션을 위한 CSS module 만들기
App.module.css 파일을 생성하고 제목을 위한 css를 작성한다.
.title {
font-family: "Courier New", Courier, monospace;
font-size: 18px;
}
이 module css 파일을 App 어플리케이션에 styles로 import하고 제목에 해당하는 h1에 className으로 styles.title을 적용해 주면 된다.
.....
import "./App.module.css";
function App() {
return (
<div>
<h1 className={styles.title}>Welcome back!</h1>
<Button text={"Continue"} />
</div>
);
}
결과로 제목의 폰트가 바뀌었고, elements를 확인해 보면 h1이 랜덤한 자신만의 class 이름을 가지고 있는 것을 볼 수 있다.
이렇게 module.css 방식을 이용하면 작업 내내 다른 클래스 이름들을 사용하기 위해 기억하고 있어야 할 필요가 없다. create-react-app이 알아서 각기 다르게 클래스명을 지정해 줄 것이기 때문이다.
심지어 서로 다른 module.css 파일에서 똑같은 class 이름을 사용한다고 해도 전혀 문제되지 않는다. 아까와 똑같이 랜덤한 클래스 이름이 정상적으로 적용되게 된다.
댓글