props를 이용하는 방법을 앞시간에 배웠다. 이제는 함수를 이용해서 event처리를 하는 방법을 배우 볼 것이다. 우선 함수를 구현하는 방법은 Header 컴포넌트로 예시를 들어보면 아래와 같다.
...
<div>
<Header title="WEB" onChangeMode={() => {
alert('Header');
console.log('test')
}
}></Header>
...
우선 우리가 만든 Headr 컴포넌트에 onChangeMode라는 함수를 넣어주고 onChangeMode함수를 props를 컨트롤 할 수 있는 Header컴포넌트로 돌아가서 onChangeMode를 실행시키면 된다. props를 컨트롤 할 수 있는 Header컴포넌트는 아래와 같다.
function Header(props) {
return <header>
<title>section04</title>
<h1><a href="/" onClick={(event) => {
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
event.preventDefault를 사용해서 특정 event를 클릭하면 새로고침이 되지 않는 함수이다. 아래 props로 onChangeMode()함수를 불러왔다. 이제 더 나아가서 우리가 만든 리스트를 클릭하면 해당 id번호가 파업창으로 뜰 수 있게 만들어 볼 것이다. 내가 구현한 코드는 아래와 같다.
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}
onClick={(event) => {
event.preventDefault();
alert(t.id)
props.onChangeMode();
}}
>{t.title}</a></li>
)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
...
<Nav topics={topics} onChangeMode={() => {
// alert(`${topics.id}`)
}}></Nav>
...
내가 작성한 코드는 App안에 있는 Nav컴포넌트를 사용해서 alert함수를 이용한 것이 아니라 내부적으로 alert함수를 호출하게 작성을 했다. 이때까지는 props를 이용해서 함수를 불러오는 것에 미숙하지 못해서 그런 것 같다. 이제 아래 코드는 수업에서 작성한 코드이다.
...
unction 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); //함수를 props로 호출해서 컨트롤 하는 것이다.
//props.onChangeMode(t.id);
}}
>{t.title}</a></li>
)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
<Nav topics={topics} onChangeMode={(id) => { alert(id) }}></Nav>
...
}
export default App; //contact App_5.js
수업에서 작성한 코드를 살펴보면 Nav컴포넌트에서 props로 onChangeMode()함수를 컨트롤 하고 있다. 즉, Nav 태그 컴포넌트에서 onChangeMode()함수에 매개변수를 전달하고 그것이 Nav컴포넌트에서 인자를 전달 받을 수 있게 한 것이다. 더해서 let t변수를 a태그 안에서 id 프로퍼티로 설정하고 그것을 event.target으로 설정해서 id값을 다시 받는 방법을 선택했다. 이 방식을 우리는 잘 생각하고 기억해야만 한다. 아래 코드는 전체 코드이다.
function Header(props) {
return <header>
<title>section04</title>
<h1><a href="/" onClick={(event) => {
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
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); //함수를 props로 호출해서 컨트롤 하는 것이다.
//props.onChangeMode(t.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');
console.log('test')
}
}></Header>
<Nav topics={topics} onChangeMode={(id) => { alert(id) }}></Nav>
<Article title="Welcome" body="Hello" ></Article>
</div >
);
}
export default App; //contact App_5.js