속성은 props를 사용
function Header(props) {
console.log('props', props, props.title);
return <header>
<h1><a href="/">{props.title}</a></h1>
</header>
}
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
prop을 이용한 출력 방법
function App() {
return (
<div>
<Header title="REACT"></Header>
<Nav></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
<Article title="Hi" body="Hello, React"></Article>
</div>
);
}
결과
li 같이 복수의 경우
function App() {
const topics = [
{id:1, title:'html', body:'html is ...'},
{id:2, title:'css', body:'css is ...'},
{id:3, title:'javascript', body:'javascript is ...'}
]
return (
<div>
<Header title="WEB"></Header>
<Nav topics={topics}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
function Nav(props) {
const lis = [];
for(let i = 0; i < props.topics.length; i++) {
let t = props.topics[i];
lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
결과
'Dev > React' 카테고리의 다른 글
리액트 react state (1) | 2023.11.12 |
---|---|
리액트 react 이벤트(event) (0) | 2023.11.11 |
리액트 react 컴포넌트 만들기 (0) | 2023.11.11 |
리액트 react 소스 수정 방법, 배포 (0) | 2023.11.11 |
리액트 react 개발환경 기본 세팅 (0) | 2023.11.11 |