<Header title="WEB" onChangeMod={function(){
alert('Header');
}}></Header>
function Header(props) {
return <header>
<h1><a href="/" onClick={function(event){
event.preventDefault(); // 기본 동작 방지
props.onChangeMod();
}}>{props.title}</a></h1>
</header>
}
결과
축약형 어로우 펑션
<Header title="WEB" onChangeMod={()=>{
alert('Header');
}}></Header>
function Header(props) {
return <header>
<h1><a href="/" onClick={(event)=>{
event.preventDefault(); // 기본 동작 방지
props.onChangeMod();
}}>{props.title}</a></h1>
</header>
}
태그가 복수일때
const topics = [
{id:1, title:'html', body:'html is ...'},
{id:2, title:'css', body:'css is ...'},
{id:3, title:'javascript', body:'javascript is ...'}
]
<Nav topics={topics} onChangeMod={(id)=>{
alert(id);
}}></Nav>
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 id={t.id} href={'/read/'+t.id} onClick={event=>{
event.preventDefault();
props.onChangeMod(event.target.id);
}}>{t.title}</a>
</li>);
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
onChangeMod 에 id 값을 필요로 하기 때문에 각 a 태그의 id 값을 event.target.id를 통해 가져옴
결과
'Dev > React' 카테고리의 다른 글
리액트 react create (1) | 2023.11.12 |
---|---|
리액트 react state (1) | 2023.11.12 |
리액트 react 속성(props) (0) | 2023.11.11 |
리액트 react 컴포넌트 만들기 (0) | 2023.11.11 |
리액트 react 소스 수정 방법, 배포 (0) | 2023.11.11 |