React Event에 대해서

function Header(props) {
	return <header>
	  <h1><a href="/" onClick={function(){ 
      props.onChangeMode();
      }}>{props.title}</a></h1>
	</header>
}


function App() {
  const topics = [
	{id:1, title:'html', body:'html is...'},
	{id:2, title:'css', body:'css is...'},
	{id:3, title:'js', body:'js is...'}
]
	return (
	  <div>
		<Header title="REACT" onChangeMode={function(){
        alert('Header');
        }}></Header>
		<Nav topics={topics}></Nav>
		<Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, React"></Article>
	  </div>
	);
}

위에서 볼 수 있듯이 상위 컴포넌트인 <App>에서 <Header>컴포넌트에 대해서 "onChangeMode"라는 속성을 부여하고, 그에 따른 속성값으로 함수를 부여하였다.

그리고 하위 컴포넌트인 <Header>에서 props라는 인자를 활용하여 <a>라는 '유사 태그'에 "onChangeMode"이라는 속성과 그에 따른 함수 데이터를 속성값을 부여하였다.

이 때, 우리는 HTML 문서상에서 태그에 속성을 부여하고 있는 것이 아니라 JSX를 활용하여 JS가 이해 가능한문법으로 명령하고 있다. 최종적으로 우리의 명령이 컨버팅되어 HTML에 전달되는 것이기 때문에 JSX 문법에 준거하여 명령을 내려야 함을 주지하자.

onclick = " " (x)
onClick = { } (o)

JSX에서는 모든 프로퍼티를 카멜케이스로 작성
JSX에서 JS 로직을 활용할 때는 "{ }"

단, <a> 태그의 특성으로 인해 콜백함수로 들어간 함수가 실행될 때 페이지 reload가 되는 현상을 방지하기 위해서 해당 함수에 "event"라는 객체를 첫번째 파라미터로 주입해준다.
이벤트 객체는 이벤트 상황을 제어할 수 있는 여러가지 정보와 기능이 들어가있는데

<h1><a href="/" onClick={function(event){event.preventDefault();}}>{props.title}</a></h1>

와 같이 event.preventDefault()라는 "event"라는 객체 속 함수를 사용하여 <a>태그의 기본 동작을 방지해주게 된다.

---

function Nav(props) {
const lis = []
for(let i=0; i<props.topics.length; i++) {
     let t = props.topics[i];
     lis.push(<li><a href={'/read/'+t.id} onClick={event=>{
     event.preventDefault();
     props.onChangeMode();
     }}>{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:'js', body:'js is...'}
]
	return (
	  <div>
		<Header title="REACT" onChangeMode={function(){
        alert('Header');
        }}></Header>
		<Nav topics={topics}></Nav>
		<Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, React"></Article>
	  </div>
	);
}

상기의 상황에서 반복문에 따라 동적으로 추가되는 <li>에 대해서 서로 다른 함수를 적용하고 싶을 때에도

return (
	  <div>
		<Header title="REACT" onChangeMode={function(){
        alert('Header');
        }}></Header>
		<Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
        }></Nav>
		<Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, React"></Article>
	  </div>
	);

우선 이런식으로 <Nav>컴포넌트에 "onChangeMode" 속성을 부여한다. 그리고 인자로 "id"라는 데이터를 받아올 것임을 명시한다.

function Nav(props) {
const lis = []
for(let i=0; i<props.topics.length; i++) {
     let t = props.topics[i];
     lis.push(<li><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>
}

그리고 다시 위와 같이 <a>태그에 대해서 "id"라는 속성을 부여하고
props.onChangeMode(event.target.id)로 변하는 "id"값을 타겟으로 하여 onChangeMode라는 prop을 동작시킬 것임 까지를 지정하면 완료가 된다.

---

지금까지 React에서 Props와 Event 개념에 대해서 알아보았다.

이제 웹페이지를 구현할 때, 바꾸고 싶은 컴포넌트에 대해서 직접 파일로 접근해서 제어를 하기보다 최상위 컴포넌트를 조작하여 기존에 마련해놓은 로직에 따라 하위 컴포넌트에 간접적으로 제어를 할 수 있는 수단이 생겼다고 할 수 있다.