props

props를 분해할당으로 받기

 

import React from "react";

function MyElem(props) {
  console.log(props); // {name: "son", age: 33}

  const { name, age } = props;
  console.log("name", name); // son
  console.log("age", age); // 33

  return <div></div>;
}

function MyComp({ city, country, price }) {
  // props : {city: "seoul", country:"korea", price: 500}
  console.log("city", city);
  console.log("country", country);
  console.log("price", price);

  return <div></div>;
}

function App(props) {
  return (
    <div>
      <MyElem name="son" age={33} />
      <MyComp city="seoul" country="korea" price={500} />
    </div>
  );
}

export default App;

 

 

props의 값이 없을 때 기본값 할당하는 방법

 

import React from "react";

function MyComp({ name, team = "무소속" }) {
  return (
    <div>
      <ul>
        <li>이름 : {name}</li>
        <li>팀 : {team}</li>
      </ul>
    </div>
  );
}

function App(props) {
  return (
    <div>
      <MyComp name="흥민" age={33} team="토트넘" />
      <MyComp name="길동" age={44} />
    </div>
  );
}

export default App;

 

 

prop의 값 타입은 javascript의 자료형

값은 {}안에 작성
단, string이면 {}생략 가능

import React from "react";

function MyComp(props) {
  return <div></div>;
}

function App(props) {
  return (
    <div>
      {/* props의 값타입은 javascript 값타입 */}
      {/* {}에 값 입력, (string만 생략 가능) */}
      <MyComp
        name={"son"}
        street="gangnam"
        age={3.14}
        address={{ city: "seoul", contry: "us" }}
        foods={["pizza", "coffee"]}
        married={true}
        action={function () {
          console.log("action");
        }}
        someAction={() => console.log("someAction")}
      />
    </div>
  );
}

export default App;

 

props의 명명규칙

• lowerCamelCase
• 예약어 쓰지 않기
• class -> className
• for -> htmlFor

 

props에 값이 없이 이름만 작성되면 값이 true

 

import React from "react";

function MyComp({ name, age, someProp, otherProp }) {
  console.log("name", name);
  console.log("age", age);
  console.log("someProp", someProp); // true :값없이 작성되면 true
  console.log("otherProp", otherProp); // true
  return <div></div>;
}

function App(props) {
  return (
    <div>
      <MyComp name="son" age={30} someProp otherProp={true} />
    </div>
  );
}

export default App;

 

 

---

 

 

이벤트 props

 

import React from "react";

function App(props) {
  return (
    <div>
      <button
        onClick={() => console.log("clicked")}
        onMouseEnter={() => console.log("mouse entered")}
        onMouseLeave={() => console.log("mouse leaved")}
      >
        클릭1
      </button>
      <input type="text" onChange={() => console.log("changed")} />
    </div>
  );
}

export default App;

 

 

style props는 객체

import React from "react";

function MyComp({ headColor, bodyColor }) {
  return (
    <div>
      <h1 style={{ color: headColor }}>Lorem.</h1>
      <p style={{ color: bodyColor }}>Lorem ipsum dolor.</p>
    </div>
  );
}

function App(props) {
  return (
    <div>
      <MyComp headColor={"skyblue"} bodyColor={"gold"} />
      <MyComp headColor={"gray"} bodyColor={"linen"} />
    </div>
  );
}

export default App;