줄임말. 우리가 어떤 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;
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로 넘겨주는 방법입니다.
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
이벤트로 사용할 수 있습니다.