Props

유석현(SeokHyun Yu)·2022년 11월 19일

React

목록 보기
3/21
post-thumbnail

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";

export default function AppProfile() {
  return (
    <>
      <Profile
        url="https://w.namu.la/s/40798176c5352e763e0cb04d58addcead564740ca6df82478a10879bcfabfbd00ecef0e5f28bd5adbc444b9203cd12946cd25e97e8f5e84c1664a0c37abcd05bc59f94c21139507d0caace216094aa002e73de2e4bf4206f80300fa7697c466be725c76932f716f4f9780da190165871"
        year="2013"
        title="Yeezus"
      />
      <Profile
        url="https://w.namu.la/s/03840c3d31d2da06ed86073ea746b1d77a9d13d46735ddbb19ab7b2baf3cd7354ca13d48d6894bbe79588deaed7add1053b046da7e5580f03a7f3864d4f4c9bb6be14ceab018e39db3c995125037e86d6a1d8ff55e7fd98b60e3002b118eca9f99d94132e8827843bc0ea82fe908a3b0"
        year="2018"
        title="Ye"
      />
      <Profile
        url="https://w.namu.la/s/54bdb55f0753cec1e4325c90233c4c36892b9d8571559d42cc89d95b6e7f5119e1c44180a2073ba86a0114f52d0701f762afe9305324e5bc63551c6de029780cb76f3d5be997ca4f2eb4c791190704c41bc47150133a40430759982bdea21e8d78069db87c95f43774fafc35a90023c8"
        year="2019"
        title="Jesus Is King"
      />
    </>
  );
}

Profile.jsx

export default function Profile({ url, title, year }) {
  return (
    <div className="profile">
      <img src={url} alt="avatar" className="photo" />
      <h1>{title}</h1>
      <p>{year}</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

profile
Backend Engineer

0개의 댓글