生活コード改訂版2022改訂版1日目(2)

4.構成部品の作成

1.構成部品の作成
関数名(){
//※構成部品名は大文字で始まる必要があります.
//return必須
}

컴포넌트를 만드는 방법 
function Header() {
  return (
    <header>
      <h1>
        <a href="/">WEB</a>
      </h1>
    </header>
  );
}

function App() {
 return (
 	// 컴포넌트를 사용하는 방법
 	<Header></Header>
 );
}

結果!!

5.道具を使う!

反応器ではpropが属性を表します!
たとえば、Headerコンポーネントでタイトル部分を変更したい場合は、どうすればいいですか?
Header構成部品にpropsを指定して変更します.

function Header(props//아무렇게 해도 상관없음)
{
	return (
    <header>
      <h1>
        <a href="/">{props.title}</a> // props 데이터를 사용할때는 {} 중괄호로 감싸줘야 합니다.
      </h1>
    </header>
  );
}

function App() {
	return <Header title="React"/> 
}

結果

繰り返し文でliを作成しましょう

配列を作成します.

const topics =   const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "javascript", body: "javascript is ..." },
];

List関数でpropsを設定します.

function List(props)
{
	const lis = [];
    
    for(int i=0; i<props.topics.length; i++) // props로 받아온 topics의 크기만큼 반복
	{
    	let t = props.topics[i]; // t에 값을 저장하고 
        lis.push( <li key={t.id}> <a href={"/read/" + t.id}>{t.title}</a></li>) 
        // lis에 값을 넣어준다.
    }
    
    return (
    	<ol>
        	{lis} // lis를 불러온다.
        <ol>
    )
}

function App() {

return (
	<List topics={topics}/> // List 컴포넌트에서 topics를 불러올 수 있도록 topics={topics} 이렇게 설정 
);

結果

出力成功!

6.活動

ターゲット:HeaderコンポーネントでTitleをクリックすると、consoleが表示されます.ログに出力
まずはアプリjsでHeader Componentによってアクティビティが作成されます.

<Header title="React" onChangeMode={function() {console.log("DD");}} />

次にHeader構成部品に移動して設定します.

function Header(props) {
	return(
      <header>
        <h1>
          <a href="/" onClick={props.onChangeMode}> // onclick이 아닌 대소문자 구분해서 작성해야 한다.
            {props.title} 
          </a>
        </h1>
      </header>
    )
}

このように書くとエラーは発生しませんが、console.ログにDDが出力されていないことを確認できます.
これを防止するために、onChangeModeはfunction(e){e.preventDefault}を提供する必要があります.
e.preventDefaultは基本動作防止を示す.
結果

ターゲット:オブジェクトのIDを構成部品にインポートしようとします.

  <List topics={topics} onChangeMode={(id) => {
        console.log(id);
  }}>

リストでonChangeModeを設定します.

 function List(props) {
  let 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={(e) => {
            e.preventDefault();
            props.onChangeMode(e.target.id); // id는 <a 바로 밑어 있는 id를 의미.
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }

  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

結果

明日.

State

Create

Update

Delete

勉強する