[React] event

💡 이벤트

• HTML 태그에서 onclick으로 경고창 띄우는 방법

<input type="button" onclick="alert('hi')"></input> 

❓ 컴포넌트에 이벤트 기능 넣으려면

# Header 컴포넌트에 이벤트 넣기

• onChangeMode prop의 값으로 함수를 전달

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>
        // onChangeMode prop의 값으로 함수를 전달
      <Header title="WEB" onChangeMode={function () {
        // 헤더 컴포넌트 안에서 링크를 클릭했을 때 함수를 호출해 작업을 실행
    	alert('Header');  // 경고창 띄우기
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

• Header의 a 태그에 이벤트 넣기
• onClick={function () {}};
• event.preventDefault();
• props.onChangeMode();

function Header (props) {
  console.log('props', props, props.title);
  return (
  <header>
      // onClick으로 함수 호출
    <h1><a href="/" onClick={function (event) {
      // 페이지 리로드 되지 않도록 하기
      event.preventDefault();
      // 함수 호출 (alert)
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
  )
}

# 완성

function Header (props) {
  console.log('props', props, props.title);
  return (
  <header>
    <h1><a href="/" onClick={function (event) {
      event.preventDefault();
      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: 'JavaScript', body: 'JavaScript is ...'},
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={function () {
    	alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

❗️ 추가

• 함수 축약하기 ( 화살표 함수 = arrow function )

function Header (props) {
  console.log('props', props, props.title);
  return (
  <header>
      // 📍 arrow function
    <h1><a href="/" onClick={(event) => {
      event.preventDefault();
      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: 'JavaScript', body: 'JavaScript is ...'},
  ]
  return (
    <div>
       // 📍 arrow function
      <Header title="WEB" onChangeMode={() => {
    	alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

# Nav 컴포넌트에 이벤트 넣기

• onChangeMode prop의 값으로 함수를 전달

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>
        // onChangeMode prop의 값으로 함수를 전달
      <Nav topics={topics} onChangeMode={(id) => {
        // Nav 컴포넌트 안에서 링크를 클릭했을 때 함수 호출
        // id 값 경고창 띄우기
        alert(id);
      }}></Nav>
      <Article title="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

• Nav의 a 태그에 이벤트 넣기
• onClick={function () {}};
• event.preventDefault();
• props.onChangeMode();
• a 태그에 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}>
          // onClick으로 함수 호출
      	  // id 값 부여하기	
        <a id={t.id}href={'/read/'+t.id} onClick={(event) => {
          event.preventDefault();
          // 함수 호출 (id 값) (alert)
          props.onChangeMode(event.target.id);
        }}>{t.title}</a>
      </li>
    )
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}

# 완성

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="Welcom" body="Hello, WEB"></Article>
    </div>
  );
}

✨ 끝 !

✦ 출처 : 생활코딩 [React 2022년 개정판]