오전
세상에 머리속이 뒤죽박죽인 상태에서 시작하디니..
이러니까 다 못하지..
오후
개인과제에 정신이 팔려서 신경쓰질 못했다.. 반성..
진짜 기초 개념을 놓치고 있는 것 같아 추천받은 다른 강의도 찾아보았당
다시한번 연습하자... 진짜 뭐하는거니!
App.jsx
import './App.css'
import Box from './Box'
export default function App() {
return (
<main>
// 컴포넌트 재활용 ㅜㅜ
<Box name="희진"/>
<Box name="영웅"/>
</main>
)
}
App.css
.box{ border: 1px solid red; width: 100px; height:100px; }
Box.jsx
import React from "react";
function Box(props){
return (
<div className="box">
Box
{props.name}
</div>
)
}
export default Box;
Box컴포넌트를 따로 분리하면 코드 가독성과 재활용이 쉽다
얘를 가져다 쓸 App컴포넌트에서 <Box name="희진"/> 이런식으로 선언해주고 Box컴포넌트에선
props를 매개변수로 받아와 {props.name}으로 찍어주면 적용된다 wow
오 맥 구입하셨나요? ㅎㅎ