egoing - React - props - array

펑션네브에 어레이데이터 전달 합니다.

---

단순한 데이터만 바인딩 할 수 있다면 재미 없습니다.

어레이도 바인딩할 수 있어야 합니다.

어레이 데이터 바인딩을 실습해 봅니다.

그러려면 약간의 콘트롤 스테이트먼트가 필요합니다.

또한, 어레이이므로 데이터 각각의 고유한 아이덴티티도 필요할것입니다.

---

export default 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 className="App">
      <Header title="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

Completion

---

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

 

JS 의 array 를 사용해서 데이터를 담아봅니다.

텍스트 데이터를 배리어블에 어레이로 담아 둡니다.

---

<Nav topics={topics}></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 href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

 

Completion

---

function Nav(props) {
  const lis = []
  for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li>{t.title}</li>);
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}

 

파라미터로 프롭스를 사용합니다.

배리어블을 세팅합니다.

반복문을 돌려서 배리어블의 모든 데이터를 불러내서 푸시합니다.

---

    lis.push(<li><a href={'/read/'+t.id}>{t.title}</a></li>);

 

푸시한 데이터에 링크 문자열을 추가합니다.

F12 콘솔 체크

key prop 에러 메시지가 뜹니다.

---

    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);

 

에러 내용은 li 태그는 자기만의 고유한 프롭스를 가져야 한다는 뜻입니다.

즉, li 태그 하나하나에 키값을 주라는 뜻입니다.

이 반복문 안에서만 유효한 t.id 를 사용해서 키값을 설정하겠습니다.

F12 콘솔 체크

에러가 사라졌습니다.

표현식은 정해진대로 하면 되는거니까 논리적으로 파헤칠 필요 없이 그대로 따르면 됩니다.

---

    <nav>
      <ol>
        {lis}
      </ol>
    </nav>

 

lis 데이터바인딩 합니다.

---

test

 

1 2 3 탭합니다.

/read/3

유알엘이 이렇게 생성되는지 체크 합니다.

---

---

completion

import "./styles.css";

function Header(props) {
  console.log("props", props.title);
  return (
    <header>
      <h1>
        <a href="/">{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 href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

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

export default 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 className="App">
      <Header title="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

---