React입문 1주차(map)

map

원래 데이터를 가공하여 출력하는 방법

 

리액트에서의 map

// ./src/App.js
import React from "react";
import './App.css';

const App = () => {

  return (
    <div className="app-style">
      <div className="component-style">감자</div>
      <div className="component-style">고구마</div>
      <div className="component-style">오이</div>
      <div className="component-style">가지</div>
      <div className="component-style">옥수수</div>
    </div>
  );
  
};

export default App;

▼ map를 사용하여 리팩토링해보기

/*App.css*/
.app-style {
  padding: 100px;
  display: flex;
  gap: 12px;
}

.component-style {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

import React from "react";
import './App.css';

const App = () => {

  const testArr = ['감자','고구마','오이','가지','옥수수']

  return (
    <div className="app-style">
      {testArr.map(function(a){  // map를 사용해서 콜백함수의 안에 배열의 요소가 차례로 들어가도록함
          return <div className="component-style">{a}</div>})}
    </div>
  );
  
};

export default App;

---

filter을 이용해서 오이를 빼고 만들어 보기

import React from "react";
import './App.css';

const App = () => {

  const testArr = ['감자', '고구마', '오이', '가지', '옥수수']

  return (
    <div className="app-style">
      {testArr.filter(function (a) {
        return a !== "오이"  // [감자, 고구마 오이, 가지, 옥수수]
        }).map(function(a){
          return <div className="component-style">{a}</div>
        })
      }
    </div>
  );

};

export default App;

> filter을 이용해서 오이를 제외한 배열을 만들어줬다 -> [감자, 고구마, 가지, 옥수수]

> 그걸 다시 하나하나에 css를 적용을 시켜줘야하니까 하나하나에 적용을 해서 배열로 만들어내는 map를 한 번 더 이용한것이다.

<div className="component-style">{a}</div>

> 이걸로 가공해서 사용하는 것