[React] react props

가장 간단한 리액트구조

import "./styles.css";

export default function App() {
  return (
      <h1>Hello World!</h1>
  );
}

• return문으로 렌더링 해준다.

import "./styles.css";

export default function App() {
  const firstName = "la"
  const lastName = "ru"
  return (
      <h1>Hello {lastName} {firstName}</h1>
      
  );
}

• 중괄호 {} 를 사용하여 변수를 쉽게 사용할 수 있음.

• 시간 생성하는거

const date = new Date()

• 시간 조건 맞춰서 출력하는거

 import "./styles.css";

export default function App() {
  const date = new Date()
  const hours = date.getHours();
  let timeOfDay;
  if (hours <12)timeOfDay = "mornig"
  else if (hours > 17) timeOfDay = "night"
  else timeOfDay = "afternoon";
  return (
     
      <h1>good {timeOfDay}</h1>
      
  );
}
 

리액트는 컴포넌트와프롭스

Test.js

export default function Test(props) {
  console.log(props); //object형식으로 출력됨
  return (
    <div>
      <h1>Hello, My name is {props.name}!</h1>
      <p>My hobby is playing {props.hobby}.</p>
      <p>My MBTI is {props.mbti} </p>
      <p>My e-mail is {props.email}</p>
    </div>
  );
}

App.js

import "./styles.css";
import Test from "./Test";

export default function App() {
  return (
    <div>
      <Test name="eliza" hobby="piano" mbti="isfj" email="elel.elel.le" />
      <Test name="Shocolla" hobby="baking" mbti="enfp" email="elel.chch" />
      <Test
        name="sjs"
        hobby="writing a poem"
        mbti="esfp"
        email="elel.ele.ddl"
      />
      <Test name="lihana" hobby="react" mbti="istp" email="elel.elel.le" />
    </div>
  );
}

• properties 줄여서 props

Test.js 구조분해할당으로도 해보깅

export default function Test({name, hobby, mbti, email}) {
  return (
    <div>
      <h1>Hello, My name is {name}!</h1>
      <p>My hobby is playing {hobby}.</p>
      <p>My MBTI is {mbti} </p>
      <p>My e-mail is {email}</p>
    </div>
  );
}