이번에는 컴포넌트에 이벤트 기능을 만들어 클릭하면 알림창이 뜨도록 실습을 해볼 것이다.
전체 코드
import logo from './logo.svg';
import './App.css';
function Header(props){
return <header>
<h1><a href="/" onClick={function(event){
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
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>
}
function Article(props){
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
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" onChangeMode={function(){
alert('Header');
}}></Header>
<Nav topics={topics}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
export default App;
코드 살펴보기
Header 컴포넌트 안에서 링크를 클릭하면 컴포넌트가 onChangeMode의 함수를 호출해 Header라는 경고창을 띄우도록 동작하도록 한다.
<Header title="WEB" onChangeMode={function(){
alert('Header');
}}></Header>
onClick이라는 이벤트를 걸어주고 함수가 호출되도록 한다. 그리고 event 객체를 첫 번재 파라미터로 준다.
<h1><a href="/" onClick={function(event){
event.preventDefault();로 a태그가 동작하는 기본 동작을 방지한다.
즉, 클릭해도 reroad가 일어나지 않도록 한다.
event.preventDefault();
onClick에 함수가 호출되었을 때, props로 전달된 onChageMode 함수를 호출한다.
props.onChangeMode();
결과
이번에는 각 Nav를 각각 클릭했을 때 경고창이 1, 2, 3이 뜨도록 이벤트를 적용해볼 것이다.
전체 코드
import logo from './logo.svg';
import './App.css';
function Article(props){
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
function Header(props){
return <header>
<h1><a href="/" onClick={(event)=>{
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
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.onChangeMode(event.target.id);
}}>{t.title}</a>
</li>)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
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" onChangeMode={()=>{
alert('Header');
}}></Header>
<Nav topics={topics} onChangeMode={(id)=>{
alert(id);
}}></Nav>
<Article title="Welcome" body="Hello, WEB"></Article>
</div>
);
}
export default App;
코드 살펴보기
함수를 전달할 때 함수의 첫 번째 파라미터로 id값을 주고 함수가 호출될 때 id값이 경고창으로 뜨게 한다.
<Nav topics={topics} onChangeMode={(id)=>{
alert(id);
파라미터가 한 개인 경우에는 괄호가 생략이 가능하다.
그리고 함수를 호출할 때 id값을 주입해야 하므로 id을 부여해준다.
<a id={t.id} href={'/read/'+t.id} onClick={event=>{
이 이벤트 함수 안에서 a태그의 id속성을 얻어내기 위해 event객체를 사용한다.
target은 이벤트를 유발시킨 태그를 가리킨다. 즉, a태그를 가리키고, a태그의 id값을 가져온다.
props.onChangeMode(event.target.id);
결과
이와 같이 이벤트를 가진 컴포넌트를 만들 수 있게 되었다.
'🌐 Web > React' 카테고리의 다른 글
[React + Spring Boot] Spring Boot(eclipes)와 React 연결(1) (0) | 2023.04.07 |
---|---|
06. STATE (0) | 2022.08.16 |
04. PROPS(속성) (0) | 2022.08.16 |
03. 컴포넌트(사용자 정의 태그) 만들기 (0) | 2022.08.15 |
02. 소스코드 수정방법 (0) | 2022.08.15 |