얘는 뭐 쓸 때마다 햇깔리고 설명하기도 햇깔린다. 그래서 메모
//메인페이지
import TopNav from '어디어디';
const index = () =>{
return
<div>
<TopNav tilte={title} shareColor={shareColor}/>//변수 알아서 만들기
</div>
}
export default index;
--------------------------------------------------------------------
//탑네비게이션
const TopNav = (props) => {
return (
<section >
{props.share && <ShareIcon color={props.shareColor} />}
{props.rightCancel && <RightCancelIcon />}
<h1>{props.title}</h1>
</section>
);
};
export default FixedTop;
//얘가 props로 넘겨준 shareIcon
const ShareIcon = (props) => {
return (
<div
onClick={() => {
console.log('필요한거 알아서')
}}
>
<img src={props.shareColor}/>
</div>
);
};
export default ShareIcon;
//얘가 props.로 넘겨준 rightCancel
const RightCancelIcon = () => {
return (
<div
onClick={() => {
console.log('필요한거 알아서')
}}
>취소이미지</div>
);
};
export default RightCancelIcon;
-----------------------------------------------------------
위 같을 때 prop로 필요한 아이콘 계속 추가 할 필요 없이
//메인페이지
import TopNav from '어디어디';
//import 두개더
const index = () =>{
return
<div>
<TopNav tilte={title} >
<RightCancelIcon/>
<ShareIcon shareColor={shareColor}>
</TopNav>
</div>
}
export default index;
-----------------------------------------------------------
//탑네비게이션
const TopNav = (props) => {
return (
<section >
{props.childern}
<h1>{props.title}</h1>
</section>
);
};
export default FixedTop;
//얘가 props로 넘겨준 shareIcon
const ShareIcon = (props) => {
return (
<div
onClick={() => {
console.log('필요한거 알아서')
}}
>
<img src={props.shareColor}/>
</div>
);
};
export default ShareIcon;
//얘가 props.로 넘겨준 rightCancel
const RightCancelIcon = () => {
return (
<div
onClick={() => {
console.log('필요한거 알아서')
}}
>취소이미지</div>
);
};
export default RightCancelIcon;
으로 사용