React - Function: Map, Filter - Practice Artist List

Map 함수

• 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
• 이 때, 기존의 배열은 영향을 받지 않는다.
• map을 이용해서 화면에 렌더링 할 때는 key 값을 꼭 작성해야한다.
• 이 때, key 값은 고유한 값을 사용해야하며 인덱스는 추천하지 않는다

왜? 삭제나 추가에 따라 고유하지 않게 될 수도 있음!
데이터를 생성할 때 고유하게 구분해주는 key를 하나 두는 것이 좋음

Json: save data

{
    "result": [
      {
        "num" : 0,
        "title": "아이유 (IU)",
        "birthYear": 1993,
        "content": "대한민국의 가수 겸 배우. 15세였던 중학교 3학년 때 2008년에 가수로 데뷔했으며, 예명인 '아이유'는 '음악으로 너와 내가 하나가 된다'라는 뜻을 가지고 있다.",
        "imgSrc": "https://mblogthumb-phinf.pstatic.net/MjAxNzA5MDdfMjQ1/MDAxNTA0NzY2MTg3NjMw.082G5PddLUVM6x35yJ5Ex6lKonxHrf_tf7lJHjEijYsg.WSzLj8tTAdxrZqXxMMutfLdOE-P7oNKK80_asLRlEmAg.PNG.morning1377/%EC%95%84%EC%9D%B4%EC%9C%A0_%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8_%EA%B7%BC%ED%99%A9.PNG?type=w2",
        "SNS": "https://www.instagram.com/dlwlrma"
      },
      {
        "num" : 1,
        "title": "수지 (Suzy)",
        "birthYear": 1994,
        "content": "대한민국의 가수이자 배우. 2010년 데뷔한 JYP 소속의 걸그룹 미쓰에이의 원년 멤버다. 2011년 드림하이로 처음 연기 데뷔를 했고 2019년부터 매니지먼트 숲 소속으로 연기자와 유튜버로 활동하고 있다.",
        "imgSrc": "https://newsimg.sedaily.com/2019/09/04/1VO45O5N53_3.jpg",
        "SNS": "https://www.instagram.com/skuukzky"
      },
      {
        "num" : 2,
        "title": "나연 (Nayeon)",
        "birthYear": 1995,
        "content": "대한민국의 가수. JYP엔터테인먼트 소속 9인조 그룹 TWICE의 맏언니이며, 리드보컬과 리드댄서를 맡고 있다.2022년 6월 24일 첫 미니 앨범인 IM NAYEON을 발매하며 솔로 활동을 시작했다.",
        "imgSrc": "https://cphoto.asiae.co.kr/listimglink/1/2022021015065139442_1644473211.jpg",
        "SNS": "https://www.instagram.com/nayeonyny"
      }
    ]
  }

Box.jsx

import React from 'react'
import { Card , Button} from 'react-bootstrap';

const Ex06Box = ({item}) => {
    console.log('넘아오는 데이터',item);
  return (
    <div>
         <Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={item.imgSrc} height="350px" />
<Card.Body>
  <Card.Title>
    {item.title} {item.birthYear}
  </Card.Title>
  <Card.Text>{item.content}</Card.Text>
  <a href={item.SNS} target="_blank">
    <Button variant="primary">Instagram</Button>
  </a>
</Card.Body>
</Card>
    </div>

  )
}

export default Box

실행 app.jsx

import React from 'react'
import Box from './component/Box';
import "bootstrap/dist/css/bootstrap.min.css";
import data from './json/data.json'
import { Card , Button} from 'react-bootstrap';
/**
 * Step 1: ex06.json 파일을 수입해온다
 * Step 2: 가져온 json에서 배열을 취는다
 * Step 3: map 함수를 이용해서 아이유,수지,나연의 데이터를 
 * box component에 전달한다 (props)
 * 이 때, key값에 주의한다~
 * Step4: ex06Box.jsx에서 받아 데이터 카드를 생성한다
 * Step 5: 디자인을 시자한다!
 */
const App = () => {
    
    console.log('json data',data);
   let mappArr =data.result.map(item=><Box item ={item} key ={item.num}/>)
   let filterArr = data.result.filter(item=>item.birthYear <= 1994)
   console.log('filter',filterArr);
  return (
    <div>
        <h1>Map 최종 실습</h1>
        <div style={{display: 'flex',width:"300px"}}> 
           {mappArr}
           </div>
           <hr/>
           <h1>Filter함수</h1>
           <h3>1994년생과 나이가 같거니 많은 사람만 출력하시오</h3>
           <div style={{display: 'flex',width:"300px"}}><br/>
          
           {filterArr.map(item =><Box item ={item} key ={item.num}/>)}
           </div>
    </div>
  )
}
export default App