반복되는 컴포넌트 처리하기

[학습 목표]
1. map을 통해 이전 예제를 리팩토링 해볼 수 있습니다.
2. 복잡한 구조의 데이터를 다양한 API를 사용하여 구현할 수 있습니다.
3. 퀴즈를 성공적으로 해결할 수 있습니다.
4. (부가내용) null과 undefined의 차이점에 대해서 설명할 수 있습니다.

리액트에서의 map

이전 예제

import React from "react";

const App = () => {
  const style = {
    padding: "100px",
    display: "flex",
    gap: "12px",
  };

  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
		display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <div style={style}>
      <div style={squareStyle}>감자</div>
      <div style={squareStyle}>고구마</div>
      <div style={squareStyle}>오이</div>
      <div style={squareStyle}>가지</div>
      <div style={squareStyle}>옥수수</div>
    </div>
  );
};

export default App;

map을 사용해서 구현해보기

import React from "react";

  const vegetables = ["감자", "고구마", "오이", "가지", "옥수수"];

  return (
    <div className="app-style">
      {vegetables.map((vegetableName) => {
        return (
          <div className="square-style" key={vegetableName}>
            {vegetableName}
          </div>
        );
      })}
    </div>
  );
};

export default App;

야채들을 배열로 두고 map을 사용해서 배열을 하나씩 돌면서 style을 적용한다.