React 4. props 와 event

prop와 event를 함께 보시죠 

- 컴포넌트에 속성값을 넣을수 있는 props에 대해 공부

- 이벤트는 말그대로 이벤트가 발생 되었을때 어떤한 역할을 해주는것 입니다. 

---

 

1. React 3.에서 마지막에 완성 했던 소스

import logo from './logo.svg';
import './App.css';

//사용자 정의 테그 만들기 (컴포넌트)
function Header(){
    return <header>
        <h1><a href="/">WEB</a></h1>
    </header>
}

function Nav(){
    return<nav>
        <ol>
            <li><a href="/read/1">html</a></li>
            <li><a href="/read/2">css</a></li>
            <li><a href="/read/3">js</a></li>
        </ol>
    </nav>
}

function Article(){
    return <article>
        <h2>웰컴 ~~</h2>
        Hello, Web
    </article>
}


function App() {
  return (
    <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
    
  );
}

export default App;

2. props를 사용 해보겠습니다.

import logo from './logo.svg';
import './App.css';

//사용자 정의 테그 만들기 (컴포넌트)
function Header(props){
    return <header>
        <h1><a href="/">{props.title}</a></h1>
    </header>
}


/*... 생략 */


function App() {
  return (
    <div>
    // 이 코드줄에서 title에 주는값을 위쪽 {props.title}의 값에 넣어 주게 됩니다. 
        <Header title = 'React'></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
    
  );
}

export default App;

이렇게 해더의 값이 바뀌는것을 확인 할 수 있습니다.

나머지 Nav와 Article 쪽도 바꿔 보겠습니다. 

import logo from './logo.svg';
import './App.css';

//사용자 정의 테그 만들기 (컴포넌트)
function Header(){
    return <header>
        <h1><a href="/">WEB</a></h1>
    </header>
}

function Nav(props){
	const lis =[]
    for(let i=0; i<props.topics.length; i++){
    	let t = props.topics[i];
        // 여기서 li태그 부분에 key은 고유해야한다 !!
        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"></Header>
        <Nav topics = {topics}></Nav>
        <Article title="Welcome" body="Hello,WEB"></Article>
    </div>
    
  );
}

export default App;

---

이제 위에 내용과 함께 이벤트를 설명하겠습니다. 

 

1. 이벤트 

function Header(props){
  return <header> 
      <h1><a href="/" onClick={(event) => {
        event.preventDefault();//리로드가 일어나지 않게 해주기 
        props.onChangeMode(); 
      }}>{props.title}</a></h1>
  </header>
}

/*... 생략*/


function App() {
  return (
    <div className="App">
      <Header title='WEB' onChangeMode = {()=> {
        alert('Header');
      }}></Header>
      <Nav></Nav>
      <Article title='Welcome' body='Hello, WEB'></Article>
    </div>
  );
}

이렇게

Header() 함수부분에는 onClick 부분을

<Header> 태그부분에는 onChangeMode 부분을 추가하면서 이벤트 기능을 부여하여 컨퍼넌트 사용자가 Header를 클릭했을때 해야할 작업을 정의 해주었습니다. 

( event.preventDefault();기본동작을 하지 못하게 한다. )

 

2. 이번에는 1. html , 2. css , 3. javascript 를 눌렀을때  alert를 이용하여 경고메세지를 뜨게하기

 

1. html     클릭시 메세지 창에 숫자 1

2. css    클릭시 메세지 창에 숫자 2

3. javascript  클릭시 메세지 창에 숫자 3

import logo from './logo.svg';
import './App.css';

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 ket = {t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event => {
        event.preventDefault(); //a태그를 클릭해도 아무변화가 없게 해주는코드
        props.onChangeMode(event.target.id);// event.target => 이벤트를 발생시킨 태그를 가르키게 된다. 
      }}>{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 className="App">
      <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;

---

경고메시지까지 다 잘 뜨게 되었네요~

저는 다음시간에는 state라는 개념과 예제를 해보겠습니다.