생활코딩

Coding Everybody

코스 전체목록

닫기

이벤트

강의소개

리액트에서 이벤트 기능을 구현하는 방법을 소개합니다. 

 

 

 

강의

 

 

 

소스코드

변경점

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;

 

 

 

 

라이브 데모

 

댓글

댓글 본문
  1. 오리너구리
    event.target.id는 topics.id를 불러오는게 아니라 event.target의 id를 불러오는것입니다.
    여기서 event.target은 a태그가 되겠습니다. 따라서 a태그의 id를 t.title로 정의했다면 역시 event.target.id는 t.title을 들고오겠죠.
    did 미작동에 대한 대답은 아래와 같습니다.
    한번 console.dir(event.target)을 찍어서 확인해보시면 좋을 것 같습니다.
    태그에는 제공되는 정의된 속성들이 있고(속성은 변수명처럼 우리가 정의해서 쓰는게 아닙니다) console.dir은 이걸 객체데이터로 확인시켜줍니다.
    그리고 그 안에는 did라는 속성이 없습니다. 따라서 undifined 되는 것입니다.
    태그에 id={t.id}로 해준것은 a태그의 id속성에 id값을 전달해준것입니다.
    예를들어 존재하는 속성중에 lang이 있습니다. 시도하신 did가 아니라 lang을 적용해보면 정상작동하는것처럼 보이는 것을 확인할 수 있습니다.
    대화보기
    • toonfac
      220704 오전 1시 08분 완료
    • 테르
      event.target.id가 id를 불러오는 줄 알았는데,
      <a id={t.title}>로 바꾸니 event.target.id가 'title'을 들고 옵니다.
      <a id={t.title}>의 'id'가 event.target.id의 'id'가 연동되나 싶어.
      실험을 해보았습니다.
      <a id={t.title}>을 <a did={t.title}>바꾸고, event.target.id를 event.target.did로 바꾸었는데, undefined라고 뜨네요.
      event.target.id는 정확히 무엇을 불러오는 것이며, <a id={t.id}>와 어떤 연관이 있는지

      혹시 알려주실분 있으신가요???
    • 2022.4.16완료
    • 22.04.04
      event.target.id를 참조할 때 계속 공백이 떠서 좀 헤맸는데 event가 발생하는 <a>에 id값 설정을 안 해줬었네요.
      좋은 강의 감사합니다.
    • gonasooc
      이벤트부터 리뷰 필요
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기