[React] map과 find를 사용해서 데이터 리스트 렌더링 하기

 

   목차 

1. map을 사용하여 렌더링 하기 

2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 

3. find를 사용하여 렌더링 하기 

4. 컴포넌트로 분리 됐을 경우에 find 사용하는 법

 

 

 

map과 find를 사용해서 데이터 리스트 렌더링을 해보자!

 

 

 

---

 

 

 1. map을 사용하여 렌더링 하기 

 

 

 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. 

 

 List.jsx  (페이지) 

import "./List.css";

const List = () => {

  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  return (
    <div>
    </div>
  );
};

export default List;

 

 

 

 (2) map 메서드를 사용해서 리스트를 렌더링 한다. 

 

 List.jsx  (페이지)

import "./List.css";

const List = () => {

  const navigate = useNavigate(); 

  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  return (
    <div>
      <div className="list-container">
        {dummyList.map((it) => (
          <div key={it.id}>
            <div className="list-box">{it.title}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default List;

 

* 에러 ("Warning: Each child in a list should have a unique "key" prop.") 방지를 위해서   최상위 태그에 key={it.id} 를 추가해준다)

* it은 객체 각각을 의미하는 것으로, el 등등 다른 단어를 써도 무방하다.

* 데이터를 불러올 때는 {it.id} , {it.title}과 같이 it.(key) 형식으로 불러온다.

 

 

 결과 

 

 

 

---

 

 

 2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 

 

 

 (1) ListItem.jsx 컴포넌트를 생성해서 List.jsx에서 분리할 부분만 가져온다. 

 

 ListItem.jsx  (컴포넌트) 

import "./ListItem.css";

const ListItem = () => {

console.log();

  return (
    <div>
      <div className="list-box"></div> 
    </div>
  );
};

export default ListItem;

 

 

 

 (2) List.jsx에서 ListItem.jsx 컴포넌트를 import해서 map 메서드 안에 적용한다. 

 

 List.jsx  (페이지)

import "./List.css";
import ListItem from "../../components/ListItem/ListItem";

const List = () => {

  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  return (
    <div>
      <div className="list-container">

        {dummyList.map((it) => {
          return <ListItem key={it.id} {...it} />;
        })}
      </div>
    </div>
  );
};

export default List

 

* {...it} 스프레드 연산자를 통해 객체들을 전부 다 ListItem에게 props로 전달한다. 

 

 

 

 (3) ListItem.jsx에서 props로 받아온다. 

 

 ListItem.jsx  (컴포넌트)

import "./ListItem.css";

const ListItem = (props) => {

console.log(props); // 콘솔에 찍어보기

  return (
    <div>
      <div className="list-box"></div> 
    </div>
  );
};

export default ListItem;

 

* console.log(props) 로 콘솔에 찍으면 다음과 같이 데이터를 잘 불러온다.

 

 

 

 (4) ListItem.jsx에서 props로 받아온것을 렌더링 한다. 

 

 ListItem.jsx  (컴포넌트)

import "./ListItem.css";

const ListItem = (props) => {

  return (
    <div>
      <div className="list-box">{props.title}</div> 
    </div>
  );
};

export default ListItem;

 

* props는 data 등등 다른 단어를 써도 무방하다.

* 렌더링 할때는 {props.title} 과 같이 props.(key) 형식으로 불러온다.

 

 

 결과 

 

 

 

---

 

 

 3. find를 사용하여 렌더링 하기 

 

 

 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. 

 

 List.jsx  (페이지)

import "./List.css";

const List = () => {

  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  return (
    <div>
    </div>
  );
};

export default List;

 

 

 

 (2) find 메서드를 사용해서 하나의 객체만 렌더링 한다. 

 

 List.jsx  (페이지)

import "./List.css";

const List = () => {
  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  const targetData = dummyList.find((it) => parseInt(it.id) === parseInt(1)); 
  
  console.log(targetData); // 콘솔에 찍어보기

  return (
    <div>
      <div className="list-container">
        <div className="list-box">{targetData.title}</div>
      </div>
    </div>
  );
};

export default List;

 

* find 메서드를 통해 id가 1인 객체를 찾아서 targetData에 담는다.  

* console.log(targetData)를 찍어보면 아래와 같이 id가 1인 객체가 뜬다.

 

 

 결과 

 

 

---

 

 

 4. 따로 컴포넌트로 분리 됐을 경우에 find를 사용하는 법 

 

 

 (1) ListItem.jsx 컴포넌트를 생성해서 List.jsx에서 분리할 부분만 가져온다. 

 

 ListItem.jsx  (컴포넌트)

import "./ListItem.css";

const ListItem = () => {

console.log();

  return (
    <div>
      <div className="list-box"></div> 
    </div>
  );
};

export default ListItem;

 

 

 

 (2) List.jsx에서 ListItem.jsx 컴포넌트를 import한 다음, ListItem.jsx 컴포넌트에 props로 find 메서드로 찾은 데이터(targetData)를 전달한다. 

 

 List.jsx  (페이지)

import ListItem from "../../components/ListItem/ListItem";
import "./List.css";
// import ListItem from "../../components/ListItem/ListItem";

const List = () => {
  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  const targetData = dummyList.find((it) => parseInt(it.id) === parseInt(1));

  return (
    <div>
      <div className="list-container">
        <ListItem key={targetData.id} {...targetData} /> // props로 targetData 전달하기
      </div>
    </div>
  );
};

export default List;

 

 

 

 (3) ListItem.jsx에서 props로 받아온것을 렌더링 한다. 

 

 ListItem.jsx  (컴포넌트)

import "./ListItem.css";

const ListItem = (el) => {

  return (
    <div>
      <div className="list-box">{el.title}</div> 
    </div>
  );
};

export default ListItem;

 

 

 결과