[React] for문 / map()

🔵 for문 / map()

Navigator의 li를 props를 이용해 값 받아와서 넣기

Navigator를 보여주는 부모 컴포넌트 App에 content 정보 객체를 여러개 가지고 있는 배열 contents 만들기

const App = () => {
  const contents = [
    { id: 1, name: "white", text: "white is ..." }
    { id: 2, name: "gray", text: "gray is ..." }
    { id: 3, name: "black", text: "black is ..." }
  ]
  
  <Navigator contents={contents} />   // props로 전달되는 내용 넣기

}

---

🔵 for문

const Navigator = (props) => {   // 부모 컴포넌트로 받아올 props 넣기
  const list = [];   // <li>를 넣어줄 빈 배열
  
  for (let i = 0; i < props.contents.length; i++) {
    let cont = props.contents[i];   // contents의 i번째 객체를 cont에 저장
    list.push(   // 빈 배열인 list에 push로 내용 넣기
      <li key={cont.id}><a href={`/read/${cont.id}`}>{cont.name}</a></li>
      // cont객체 안의 id, name 가져오기
    );
  }
  
  return (
    <nav>
      <ol>{list}</ol>
    </nav>
}

🔵 map()

const Navigator = (props) => {
  
  const content = props.contents.map((cont) => {   // contents의 객체 하나씩을 cont로 가져오기
    <li key={cont.id}><a href={`/read/${cont.id}`}>{cont.name}</a></li>
    // cont객체 안의 id, name 가져오기
  })
  
  return (
    <nav>
      <ol>{list}</ol>
    </nav>
}

🔵 Result