Component

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import AppProfile from "./AppProfile";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AppProfile />
  </React.StrictMode>
);

AppProfile.jsx

import Profile from "./components/Profile";
import "./App.css";
// 상위 컴포넌트에서 css를 import 해주면 하위 컴포넌트에서 굳이 import를 안해줘도 import한 것처럼 사용할 수 있음
// index.js에서 import 하면 이 파일에서도 import 안해줘도 됨

export default function AppProfile() {
  return (
    <>
      <Profile />
      <Profile />
      <Profile />
    </>
  );
}

Profile.jsx

import React from "react";

export default function Profile() {
  return (
    <div className="profile">
      <img
        src="https://w.namu.la/s/03840c3d31d2da06ed86073ea746b1d77a9d13d46735ddbb19ab7b2baf3cd7354ca13d48d6894bbe79588deaed7add1053b046da7e5580f03a7f3864d4f4c9bb6be14ceab018e39db3c995125037e86d6a1d8ff55e7fd98b60e3002b118eca9f99d94132e8827843bc0ea82fe908a3b0"
        alt="avatar"
        className="photo"
      />
      <h1>Ye</h1>
      <p>2018</p>
    </div>
  );
}

App.css

.test {
  color: #ff6347;
}

.profile {
  margin: 2rem;
  width: 300px;
  text-align: center;
  padding: 1rem;
  background-color: antiquewhite;
  border-radius: 30%;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.photo {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

View