⚛️React : section06 - Event

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>

}

function App() {

 ...

<Nav topics={topics} onChangeMode={() => {

        // alert(`${topics.id}`)

      }}></Nav>

 ...

}

export default App;

내가 작성한 코드는 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>

}

 

function App() {

  ...

  <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