React

props

-반복되는 정보에 유용히 사용되는 기능

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

React DevTools

• debugging에 탁월함, 요소 하나하나를 따로 볼수 있고, chrome extension에 추가해서 볼 수 있음 (ex.airbnb site가면 다 react로되어있고 잘 구분해서 확인가능 함)