[React] 리액트로 리스트 만들기 & 컴포넌트 반복

 

 

🤤 리액트로 리스트를 만들어보자~

 

html 작성법과 같이 ul 과 li 로 작성!

class 는 className 으로 쓴다.

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

function App() {
  return (
    <div>
      <ul className="ul-style">
        <li className="li-style">감자</li>
        <li className="li-style">고구마</li>
        <li className="li-style">당근</li>
        <li className="li-style">가지</li>
        <li className="li-style">애호박</li>
      </ul>
    </div>
  );
}

export default App;

.ul-style {
  margin: 0;
  padding: 20px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

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

ul 에 display: flex, justify-content: space-between 으로 간격을 맞춰주고,

li 도 display, justify-content, align-items 로 문자들을 가로 세로 중앙 정렬해준다.

 

 

그런데 데이터가 더 .. 많아질 상황에서 li 를 계속 늘릴 순 없다.

💡 map 을 활용해 보자!

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

function App() {
  const testArr = ["감자", "고구마", "당근", "가지", "애호박"];

  return (
    <div>
      <ul className="ul-style">
        {testArr.map((item) => (
          <li className="li-style">{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

배열 testArr 에 map 을 적용해 li 를 하나씩 추가해준다!

결과는 위와 같다. 🥹

 

➕ filter 활용

특정 데이터만 출력하고 싶다면?

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

function App() {
  const testArr = ["감자", "고구마", "당근", "가지", "애호박"];

  return (
    <div>
      <ul className="ul-style">
        {testArr
          .filter((item) => item !== "감자") {/*감자가 아닌 요소만 걸러줘!*/}
          .map((item) => (
            <li className="li-style">{item}</li>
          ))}
      </ul>
    </div>
  );
}

export default App;

 

testArr 에 filter 를 적용하면 감자를 제외한

새 배열 ["고구마", "당근", "가지", "애호박"] 이 반환된다.

그 새 배열에 map 을 적용해 li 로 출력한다!

 

그럼 이렇게 ~