230412 숙달을 위한 메모: 배열과 map + 230315내용추가

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

가령 데이터가 여러개 있는 경우엔 react에선 어떤 메소드를 사용해야할까?
그리고 이 데이터를 나열해야하는 상황에선 어떻게 해야할까?
물론 하나씩 뽑아서 쓰는 방법도 있겠지만 굉장히 비효율적이다.

때문에 JS에선 for문을 사용해 데이터 나열 시 사용하기도한다.
하지만 react에서는 map이란 메소드를 사용하는데,
이를 어떻게 사용하는지 예시와 함께 기록해 두려한다.

---

예시. 게시판 만들어보기

우선 코드파일은 전체를 보여줄 App.jsx,
글을 써서 저장하는 것이 아닌 임의로 게시글 데이터를 저장할 articleData.js
이러한 데이터 내용을 보여줄 Board.jsx로 나눠 작성하도록 한다.

우선 articleData.js

export const articleData = {'id': 1, 'title': '제목 입니다', 'content': '내용 입니다'}

 

다음 Board.jsx

import React, { useState } from 'react'
import {articleData} from '../constants/articleData'

function Board() {
    return (
    <div>
    <!-- {} 로 감싸는 것은, 
    해당 파일 내부의 articleData 라는 이름의 변수를 비구조할당하는 것과 동일한 원리 -->
        <h1>{articleData.title}</h1>
        <p>{articleData.content}</p>
    </div>
    )
}
// {} 없이 그냥 작성하게 되면, 
// 해당 파일에서 export default 된 경우에만 해당 변수를 읽어올 수 있고,
// 아닌 경우에는 변수를 제대로 찾지 못함!!

export default Board

export const articleData = {'id': 1, 'title': '제목입니다', 'content': '내용입니다'} //가아닌
// ↓
const articleData = {'id': 1, 'title': '제목입니다', 'content': '내용입니다'}
export default articleData // 이렇게 작성 하면

// ↓ 다른파일에선 아래처럼 가져올 수 있음
import data from '../constant/articleData'

 

App.jsx에선 어떻게 가져오면 될까

import Board from "./components/Board";

function App() {
  return (
    <div className="App">
      <Board/>
    </div>
  );
}

export default App;

---

1. map을 이용한 배열 랜더링

앞서 말했 던 한 개 이상의 데이터를 효율적으로 나열 하기 위해 map을 활용해 보자
Board.jsx

// map 사용 법
// 전체데이터.map((하나의 데이터) => {하나의 데이터와 관련한 코드 작성})
// map을 사용하기 위해선 div 태그에 key={article.id}같은 유니크한 키값을 넣어주어야 한다.
import React, { useState } from 'react'
import { articleData } from '../constants/articleData'

function Board() {
    return (
        <div>
            {articleData.map((article) => {
                return (
                    <div key={article.id}>
                        <h1>{article.title}</h1>
                        <p>{article.content}</p>
                    </div>
                )
            })}
        </div>
    )
}

export default Board

카테고리 별로 필터링을 한다면 .filter메소드를 활용하면 되는데, 위 코드를 아래처럼 수정해 볼 수 있다.

/*카테고리 별 버튼을 눌러 해당 카테고리만 보이게 만들기

* 데이터에 아래처럼 카테고리가 지정되어있다고 가정
    export const data = [
    {'id': 1, 'title': '제목1', 'content': '내용1', 'category': '영화'}, 
    {'id': 2, 'title': '제목2', 'content': '내용2', 'category': '드라마'}, 
    {'id': 3, 'title': '제목3', 'content': '내용3', 'category': '예능'}
    ]

* .filter메소드 사용법
	전체데이터.filter((하나의 데이터) => (하나의 데이터와 관련한 조건문))
	ex) articleData.filter((element) => (element.category === '영화'));
    	이렇게 작성하면 카테고리 데이터만 남게된다.
*/

import React, { useState } from 'react'
import { articleData } from '../constants/articleData'

function Board() {
    const [articles, setArticles] = useState(articleData.filter((element) => (element.category === '영화')))

    return (
    <div>
        {articles.map((article) => {
            return (
                <>
                <h1>{article.title}</h1>
                <p>{article.content}</p>
                </>        
            )
        })}
    </div>
    )
}

export default Board

위 코드와 함께 카테고리를 props로 전달받아 해당글만 표시 되도록 수정한다면, 아래 코드로 최종 마무리 할 수 있다.

import React, { useState } from 'react'
import { articleData } from '../constants/articleData'

function Board(props) {
  const {category} = props
  const [articles, setArticles] = useState(articleData.filter((element) => (element.category === category)))

  return (
    <>
    {articles.map((article) => {
        return (
            <>
            <h1>{article.title}</h1>
            <p>{article.content}</p>
            </>
        )
    })}
    </>
  )
}

export default Board

---

게시판 만들기가 마무리 되었다.  내용이 많진 않지만 props의 개념과 특히 map에 대한 이해가 잘 되어있지 않으면 이렇게 간단한 내용도 익숙해지는데 시간이 걸리는걸 알았다. 위 내용에서 응용을 해보는 방향으로 진행해 나중에는 쉽게 툭툭 사용할 수 있도록 연습 + 최적화 해볼 수 있도록 해야겠다.