React 입문수업 (2022년 개정판)

이벤트

강의소개

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

 

 

 

강의

 

 

 

소스코드

변경점

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. 감자순대
    24.05.23
  2. Jaehong Jun
    23.11.28
  3. 달수
    물론 t.id 써도 결과는 동일하게 작동하지만
    강의에서는 event.target을 사용해서 같은 태그 내에 다른 속성을 가져올 수 있음을 보여주실려고 한거같아요
    대화보기
    • 코딩두
      23.07.15
    • 파시
      230710
    • 어흥
      230710
    • 미미
      230701
    • 이 두 방식은 기능적으로 동일한 결과를 내지만, 약간의 차이가 있습니다.

      첫 번째 방식은 클릭 이벤트가 발생할 때마다 익명의 화살표 함수를 생성합니다. 따라서 각각의 onClick 핸들러마다 새로운 함수가 생성되며, 이는 메모리 상의 약간의 오버헤드를 발생시킬 수 있습니다. 그러나 이러한 차이는 미세하며, 대부분의 경우 무시할 정도로 작습니다.

      두 번째 방식은 onChangeMode에 직접적으로 함수를 전달합니다. 이 방식은 불필요한 함수 생성을 방지하고 코드를 더 간결하게 유지할 수 있습니다. 따라서 성능 면에서 약간의 이점이 있을 수 있습니다.

      결론적으로, 두 방식은 동일한 결과를 내지만 성능 차이는 미세하며 코드의 선호도에 따라 선택하면 됩니다. 일반적으로는 두 번째 방식을 더 선호하는 경향이 있습니다.
      대화보기
      • asd12
        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();
        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');
        }}
        ></Header>
        <Nav
        topics={topics}
        onChangeMode={(id) => {
        alert(id);
        }}
        ></Nav>
        <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
        );
        }

        처럼 props.onChangeMode(); 에 t.id 를 박아도
        같은결과가 나오는데 두방식의 차이점이 있을까요?
      • 옥이
        22.12.14
      • 당당
        2022.09.22
      • MelonMusk
        08/18
      • 오리너구리
        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}>와 어떤 연관이 있는지

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