props란? properties(속성)의

줄임말. 우리가 어떤 component에 값을 전달 해야 할 때, 사용하는 것

사용방법

App.js에서 Hello라는 component를 가지고 오고 싶다 그럼

<Hello
	name="{값}"
 />

그리고 Hello를 가지고 있는 component에서 받는 방법

function Hello(props){
	return (
		<>
			HI {props.name} // 값
		</>
	);
}
export default Hello;

props는 객체 형태로 전달 되어 파라미터를 통하여 조회가 가능 (넘겨준 name 값을 조회하려면 props.name 으로 조회)

ex)

Test.js

function Test(props) {
  return (
    <>
      <h2>hello, WE이름름 {props.name}</h2>
      <p>My hobby is playing {props.hobby}</p>
      <p>My MBIT is {props.mbti}</p>
      <p>Age {props.grade}</p>
      {props.군필 && <p>결혼함</p>}
      <p>boyFriend {props.여친}</p>
    </>
  );
}

export default Test;
//whatever == properties(props)
//props는 Object임임
//조건부 렌더링링

App.js

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

export default function App() {
  const date = new Date();
  const hours = date.getHours();
  let timeOfDay;
  if (hours <= 12) timeOfDay = "Moring";
  else if (hours < 17) timeOfDay = "Evening";
  else timeOfDay = "Afternoon";
  //12시 이전에는 Good Moring
  //17시 이후 good Evening
  //그외 good Afternoon
  //JSX출력력
  return (
    <>
      <h1>
        시간{date.getHours()}시{date.getMinutes()}분
      </h1>
      <h2>Good {timeOfDay}</h2>
      <p>--------------------</p>
      <Test
        name="친구1"
        hobby="video game"
        mbti="ISTP"
        grade={18}
        군필={true}
      />
      <Test
        name="친구2"
        hobby="use paper"
        mbti="ENFJ"
        grade={99}
        군필={true}
      />
      <Test
        name="친구3"
        hobby="drowing"
        mbti="ENTJ"
        grade={7}
        군필={false}
      />
      <Test
        name="친구4"
        hobby="변수 만듬"
        mbti="ENTP"
        grade={74}
        군필={true}
      />//Test에 요청을 보
    </>
  );
}

//component는 어떻게 인수를 받을까?

구조 분해

function Hello({color, name}){
	return <div style={{color}}>Hi {name}</div>
};
export default Hello;

defaultProps

function Hello({ color, name }) {
  return (
    <div style={{ color }}>
      Hi {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

default값으로 초기화 가능

조건부 렌더링

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

export default Hello;

isSpecial && <b>*</b> 의 결과는 isSpecial 이 false  일땐 false 이고, isSpecial이 true일 땐 <b>*</b>가 됩니다

함수를 props로 넘기는 방법

부모 컴포넌트에서 자식 컴포넌트로 함수를 props로 넘겨주는 방법입니다.

import React from 'react';

function Child({ name, onClick }) {
  return (
    <div>
      안녕하세요, {name}입니다.
      <button onClick={onClick}>클릭!</button>
    </div>
  );
}

export default function Parent() {
  function handleClick() {
    console.log('클릭');
  }

  return (
    <div>
      <Child name="react" onClick={handleClick} />
    </div>
  );
}

위 코드에서 onClick props를 통해 handleClick 함수를 자식 컴포넌트로 넘겨주었습니다. 이를 자식 컴포넌트에서 onClick 이벤트로 사용할 수 있습니다.