ch01.자바스크립트 배열의 map() 함수

• import react from "react";
  const IterationSample = () => {
    return (
      <ul>
        <li>눈사람</li>
        <li>얼음</li>
        <li>눈</li>
        <li>바람</li>
      </ul>
    );
  };
  export default IterationSample;

  <li>가 반복된다 -> 컴포넌트의 반복의 어떻게 해결할까?
• 자바스크립트 배열 객체의 내장함수인 map 함수를 통해 반복되는 컴포넌트를 렌더링이 가능하다.
  • map함수는 파라미터로 전달된 함수를 사용해 배열 내 요소를 원하는 규칙에 따라 변환후 새로운 배열을 리턴
• arr.map(callback,[thisArg])
  • callback = 새로운 배열의 요소를 생성하는 함수, 매개변수는 3가지
    • currentValue = 현재 처리하고 있는 요소
    • index = 현재 처리하고 있는 요소 index값
    • array = 현재 처리하고 있는 원본 배열
  • thisArg = callback 함수 내부에서 사용할 this 참조변수

  • const numbers = [1,2,3,4,5];
    const result = numbers.map((num)=>num*num);
    console.log(result);

 

데이터 배열을 컴포넌트 배열로 변환하기

• import react from "react";
  const IterationSample = () => {
    const names = ["눈사람", "얼음", "눈", "바람"];
    const nameList = names.map((name) => <li>{name}</li>);
    return <ul>{nameList}</ul>;
  };
  export default IterationSample;

  문자열로 구성된 배열 값을 사용하여 <li>... </li> 태그가 포함된 배열로 생성한 후 nameList에 담아 출력

• import React, { Component } from "react";
  import IterationSample from "./IterationSample";
  class App extends Component {
    render() {
      return <IterationSample />;
    }
  }
  
  export default App;

  화면에 렌더링
• 에러 발생

  • 

    에러

  • "key" prop이 없다는 경고