[React] props 사용법 / 이벤트 등록하기

(생활코딩님의 강의를 참고했습니다😙)

props은 웹페이지의 내용을 동적으로 보여주기 위해 사용됩니다.

 

props을 쓰는 방법은 1. 함수에 파라미터를 넣어줌 2. 아래와 같이 컴포넌트에 props을 추가함 

//1
function Header(props){}

//2
<Header title="React"></Header>

이벤트를 등록하는 방법은 1. 컴포넌트에 props으로 onChangeMode(함수)를 넣어줌 2. 함수에서 태그에 onClick={()=>props.onChangeMode()} 넣어줌

//1
<Header title="React" onChangeMode={() => alert("Success!")}></Header>

//2
<a
  href="/"
  onClick={(e) => {
    e.preventDefault();
    props.onChangeMode();
  }}
>
  {props.title}
</a>

 

Test.js

import React from "react";
import "./App.css";

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

function Nav(props) {
  let arr = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    arr.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode(e.target.id);
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{arr}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function Test() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "js", body: "js is ..." },
  ];
  return (
    <div className="Test">
      <Header title="React" onChangeMode={() => alert("Success!")}></Header>
      <Nav topics={topics} onChangeMode={(id) => alert(id)}></Nav>
      <Article title="Welcome" body="Hello, React!"></Article>
    </div>
  );
}

export default Test;

*props을 쓸 때 유의할 점

push와 같이 태그를 넣어줄 때 고유의 key가 필요합니다. Unique key를 넣어주면 에러 해결!

onclick=''이 아닌 onClick={}으로 작성해야 합니다.

 

*헷갈린 부분

//⭕
<a href={"/read/" + t.id}>{t.title}</a>

//❌
<a href="/read/" + {t.id}>{t.title}</a>