TIL - 반복되는 컴포넌트 간결하게 처리하기(map, filter)

아래와 같은 App.js 코드가 있다.

import React from "react";

const App = () => {
  return (
    <div className="app-style">
      <div className="squareStyle">a</div>
      <div className="squareStyle">b</div>
      <div className="squareStyle">c</div>
      <div className="squareStyle">d</div>
      <div className="squareStyle">e</div>
    </div> // 이러한 반복적인 같은 형식의 나열을 간결하게 만들어주자.
  );
};

export default App;

같은 형태의 컴포넌트가 반복적으로 나열되고 있는데, 이러한 컴포넌트를 이렇게 나열해주는건 비효율적으로 간결하게만들어보자.

---

1. map 함수를 활용해서 간결하게 만들어줄 수 있다.

import React from "react";

const App = () => {
  const testArr = ["a", "b", "c", "d", "e"]; // array 추가

  return (
    <div className="app-style">
      {/* 기존에 있던 갯수만큼 다 return 해주는 map 함수 사용 */}
      {testArr.map(function (i) {
        return <div className="squareStyle">{i}</div>;
      })}
    </div>
  );
};

export default App;

javaScript 함수를 사용할거니까 return 안에 {} 중괄호 열어주는 것 잊지않기!

---

2. filter 를 사용해서 원하는 item만 가지고 와보자

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

const App = () => {
  const testArr = ["a", "b", "c", "d", "e"];
  
// filter 함수는 return 뒤에 반드시 조건이 들어가므로 원하는 조건을 아래와 같이 명시
// 적용된 값을 기존의 형태로 불러와주기 위해서는 다시 map 함수로 정렬
  return (
    <div className="app-style">
      {testArr
        .filter((i) => {
          return i !== "c";
        })
        .map((i) => {
          return <div className="squareStyle">{i}</div>;
        })}
    </div>
  );
};

export default App;

 

---

Each child in a list should have a unique "key" -> map 함수와 key value

 

기존 코드: 모든 child는 각자의 유니크 키값을 가져야한다는 warning!

"모든 map 함수에는 고유의 key value가 필요하다."

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

const App = () => {
  const users = [
    { id: 1, age: 30, name: "Richard" },
    { id: 2, age: 24, name: "James" },
    { id: 3, age: 11, name: "Amy" },
    { id: 4, age: 29, name: "Bob" },
  ];
  return (
    <div className="app-style">
      {users.map((item) => {
        return (
          <div className="component-style">
            {item.age} - {item.name}
          </div>
        );
      })}
    </div>
  );
};

export default App;

 

key 태그 붙여주기

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

const App = () => {
  const users = [
    { id: 1, age: 30, name: "Richard" },
    { id: 2, age: 24, name: "James" },
    { id: 3, age: 21, name: "Amy" },
    { id: 4, age: 29, name: "Bob" },
  ];
  return (
    <div className="app-style">
      {users.map((item) => {
        return (
          <div key={item.id} className="component-style">
            {item.age} - {item.name}
          </div>
        );
      })}
    </div>
  );
};

export default App;