// 조상 , 부모 , 자식 컴포넌트
function App() {
return (
<div>
<h1>부모-자식 관계 테스트</h1>
<GrandFather />
</div>
);
}
export default App;
function GrandFather() {
return (
<div>
<p>할아버지</p>
<Mother />
</div>
);
}
function Mother() {
return (
<div>
<p>엄마</p>
<Child />
</div>
);
}
function Child() {
return (
<div>
<p>자식</p>
</div>
);
}
rafce 스니펫 ->
import React from 'react'
const App = () => {
return (
<div>
</div>
)
}
export default App
자동완성!!!
import React from "react";
const App = () => {
const number = 1000;
const arr = [1, 2, 3, 4, 5];
const pTagStyle = {
fontSize: "20px",
};
return (
<div>
<div id="abc" className="abc">
{/* js요소이므로 중괄호 + 객체가 필요하므로 중괄호 총2개
HTML은 1번이지만 style은 객체로 들어가야해서 2번 */}
<p
style={{
color: "orange",
fontSize: "20px",
}}
>
첫 번째 줄
</p>
</div>
<div>
{/* 따라서 style을 아래와 같이 사용 가능 */}
<p style={pTagStyle}>{number}</p>
</div>
</div>
);
};
export default App;
function App() {
return <GrandFather />;
}
function GrandFather() {
const name = "르탄이";
// 자식 함수에게 key, value를 넘김 (객체)
return <Mother name={name} />;
}
// 조상 함수에게서 객체를 받아옴
function Mother(props) {
const name = props.name;
return <Child name={name} />;
}
function Child(props) {
const name = props.name;
return <div>{name}</div>;
}
export default App;