<aside> 📌 Goal: 컴포넌트에 CSS를 적용해봅니다.
</aside>
[목차]
지금까지 Component, Props, State 까지 너무 잘 하고 있습니다. 짝짝 👏 이번 챕터에서는 우리가 만들었던 컴포넌트에 CSS를 적용해서 예쁘게 꾸며보겠습니다.
(1) 새로운 프로젝트 생성하기
이번 챕터를 시작하기에 앞서 우리가 연습할 새로운 프로젝트를 하나 더 생성해봅시다.
yarn create react-app 프로젝트이름
(2) 컴포넌트 구현해보기
우선 아래 이미지와 같이 한번 구현해볼까요? 아래의 CSS 치트 시트를 활용해서, 화면과 최대한 똑같이 만들어봅시다!
(3) 컴포넌트 파일에서 CSS 코드 분리하기
지금까지, 한 파일 내에 style을 작성해보았는데요, 이부분을 CSS 파일로 따로 작성해보겠습니다.
JSX는 사실 HTML과 굉장히 닮아 있기 때문에 방법이 크게 다르지 않습니다. 단, 한가지 차이점이 있다면 class → className 을 사용한다는 점입니다.
그럼 우리가 지금까지 작성했던 JS파일에서 CSS를 별도의 모듈(파일)로 분리해서 사용해볼까요?
import React from "react";
function App() {
const style = {
padding: "100px",
display: "flex",
gap: "12px",
};
const users = [
{ id: 1, age: 30, name: "송중기" },
{ id: 2, age: 24, name: "송강" },
{ id: 3, age: 21, name: "김유정" },
{ id: 4, age: 29, name: "구교환" },
];
return (
<div style={style}>
{users.map((user) => {
return <Square user={user} key={user.id} />;
})}
</div>
);
}
export default App;
먼저, 컴포넌트 파일에서 className 을 넣어줍니다. 그리고 이 컴포넌트에서 적용할 CSS 파일을 import 해줘야 해요. 경로가 무척 중요하니 잘 확인하시길 바랍니다.
// src/App.js
import React from "react";
import Square from "./components/Square.js";
import "./App.css"; // 🔥 반드시 App.css 파일을 import 해줘야 합니다.
function App() {
const users = [
{ id: 1, age: 30, name: "송중기" },
{ id: 2, age: 24, name: "송강" },
{ id: 3, age: 21, name: "김유정" },
{ id: 4, age: 29, name: "구교환" },
];
return (
<div className="app-style">
{users.map((user) => {
return <Square user={user} key={user.id} />;
})}
</div>
);
}
export default App;
기존 style 변수에 넣어줬던 스타일 프로퍼티들을 별도에 CSS 파일로 옮겨보겠습니다.
❗️기존에는 style을 자바스크립트 객체로 작성했었기 때문에 CSS 프로퍼티의 값을 따옴표(””)로 감싸주었지만 CSS 문법에서는 따옴표를 다 지워주셔야 합니다.
<!--src/App.css-->
.app-style {
padding: 100px;
display: flex;
gap: 12px;
}
그럼, 이렇게 컴포넌트 파일에서 CSS를 분리해보았습니다. 짜잔!