React
-반복되는 정보에 유용히 사용되는 기능
<Card //custom component
name ="Jojo" //props
tel="+123123123" //props
email="jojo@gmail.com" //props
/>
import React from "react";
import ReactDOM from "react-dom";
function Card (props) { // 동일한 styling 같이 적용 가능
return <div>
<h2>{props.name}</h2>
<img src = {props.img} alt="jojo"/>
<p>{props.number}</p>
<p>{props.email}</p>
</div>;
}
ReactDOM.render( //아래는 custom card components이며 각 정보를 save 하고 위에 props을 통해 균일한 기능 입력할수 있게 함)
<div>
<h1>Contact</h1>
<Card
name="Jack"
img="https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg"
number="12345678"
email ="jojo@gmail.com"
/>
</div>,
document.getElementById("root")
);
-먼저 기본 index.js에 기본 틀을 만들어 주고
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
-이후 사용될 contact정보의 array를 별도 파일에 아래와 같이 저장
const contacts = [
{
name: "Beyonce",
imgURL:
"https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
phone: "+123 456 789",
email: "b@beyonce.com"
},
{
name: "Jack Bauer",
imgURL:
"https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
phone: "+987 654 321",
email: "jack@nowhere.com"
},
{
name: "Chuck Norris",
imgURL:
"https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png",
phone: "+918 372 574",
email: "gmail@chucknorris.com"
}
];
export default contacts;
-App.jsx를 통해 아래와 같이 가져옴(css는 별도 적용)
import React from "react";
import contacts from "/src/contacts.js";
function Card(props) {
return (
<div>
<div className="card">
<div className="top">
<h2 className="name">{props.name}</h2>
<img className="circle-img" src={props.img} alt="jojo" />
</div>
<div className="bottom">
<p className="info">{props.number}</p>
<p className="info">{props.email}</p>
</div>
</div>
</div>
);
}
function App() {
return (
<div>
<h1 className="heading">My Contact</h1>
<Card
name={contacts[0].name}
img={contacts[0].imgURL}
number={contacts[0].phone}
email={contacts[0].email}
/>
<Card
name={contacts[1].name}
img={contacts[1].imgURL}
number={contacts[1].phone}
email={contacts[1].email}
/>
<Card
name={contacts[2].name}
img={contacts[2].imgURL}
number={contacts[2].phone}
email={contacts[2].email}
/>
</div>
);
}
export default App;