9/30- React :Map 함수를 활용한 콜렉션 실습! Map 함수를 활용한 반복 컴포넌트 생성]

FrontController패턴: 클라이언트의 다양한 요청들을 한 곳으로 집중시켜 개발 및 유지보수에 효율성을 극대화 시키는 패턴

command 패턴: 클라이언트로 부터 받은 요청들에 대해서 서블릿이 작업을 직접 처리하지 않고 해당 클래스가 처리하도록 하는 패턴

---

오후 리액트

[map()함수]

배열의 내장 함수 반복되는 컴포넌트를 렌더링 하기 위해 사용됨

 

[map 특징]

배열 안에서 내가 원하는 규칙에 따라 새로운 배열을 생성한다!

 

[콜백함수]

- 기능: 함수 안에 또 함수가 있으면 

ex) document.get~.addEventListener('click',()=>{})

 

배열이름.map(콜백함수)

<App.js>

import './App.css';
import Ex01 from './Example/Ex01'
import Ex02 from './Example/Ex02';
import Ex03 from './Example/Ex03'; 
import Ex04 from './Example/Ex04';
import Ex05 from './Example/Ex05';


function App() {

    return (
      <div>

        {/* ex01 : useState 개념, React Event  개념 */}
        {/* <Ex01/> */}

        {/* ex02: useState 좋아요 예제  */}
        {/* <Ex02/> */}

        {/* ex03: useState를 활용한 랜덤숫자게임 */}
        {/* <Ex03/> */}

        {/* ex04: Map 함수를 활용한 발복 컴포넌트 생성 */}
        {/* <Ex04/> */}

        {/* ex05: Map 함수를 활용한 콜렉션 실습! */}
        <Ex05/>
      </div>
  );
}

export default App;

ex04: Map 함수를 활용한 반복 컴포넌트 생성

import React from 'react'
import MenuBox from './Ex04Com/MenuBox'

const Ex04 = () => {

    //map 함수: 배열의 내장 함수

    // 기존 배열에 있는 요소들의 값을 변경해서 새로운 배열을 만들 때 사용
    let arr = ['홍길동','임꺽정','콩쥐']
    console.log('초기 arr',arr)

    let arrTr = arr.map(item => (item+'씨'))
    console.log('map 이후 arr', arrTr)

    //만약 map 함수로 숫자 데이터에 접근하려면?
    let numArr =[158,174,162]
    console.log('키 모음', numArr)

    let numArr2 = numArr.map((item,idx)=>(idx+'번째 :'+(item-100)))
    console.log('몸무게', numArr2)

    //만약 map 함수로 데이터에 태그를 입혀주면 어떨까?
    let group =['나연','사나','쯔위']
    let newGroup = group.map(item => <h1 key={item}>{item}</h1>)

    // 오늘의 점심메뉴를 버튼 형식으로 추축
    // 결과창 ======
    // 오늘 뭐먹지?
    // 버튼 모양 [스테이크 덮밥][콩나물 국밥][팟타이]
    // 단, 직접 적는 것 금지! map 함수 이용할 것!

    let lunch = ['스테이크 덮밥', '콩나물 국밥', '팟타이','연어']

    const ck =(event)=>{
        console.log(event.target.innerTxt)
    }

    let lunchBtn = lunch.map(item=> <button onClick={ck} key={item}>{item}</button>)

    //만약, 태그 대신 내가 만든 컴포넌트를 반복한다면?
    let coffeeMenu = [{
        menu: '아메리카노',
         price : '3500원'    
    },{
        menu: '카페라떼',
        price: '4000원'
    },{
        menu: '아인슈페너💙',
        price : '9999원'
    }]

    let renderMenu = coffeeMenu.map(item=>(<MenuBox key={item.menu} item={item}></MenuBox>))

  return (
    <div>
        {group}
        {newGroup}
        <h3>오늘 뭐먹지?</h3>
        {lunchBtn}

        <hr></hr>
        {renderMenu}
    </div>
  )
}

export default Ex04

<MenuBox.js>

import React from 'react'

const MenuBox = (props) => {
    console.log(props.item)
  return (
    <div>
        <h1>{props.item.menu}</h1>
        <h3>{props.item.price}</h3>
    </div>
  )
}

export default MenuBox

<ex05>

Map 함수를 활용한 콜렉션 실습!

import React from 'react'
import PhotoCard from './Ex05Com/PhotoCard'

const Ex05 = () => {

    // 조건1) Ex05Com 폴더 => PhotoCard.js 컴포넌트 사용!
    // 조건2) member라는 배열안에 name과 url 주소가 포함된 객체들을 생성할 것
    // 조건3) 만약 배열에 앖을 추가하면 바로 새로운 카드들이 생기게 할 것

    let member = [{
        name: '다람쥐',
        url: 'https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/4arX/image/FToC1jQw1U0mAhJYnEmTPg7ZQD8.jpg'
    },{
        name: '래서판다',
        url: 'https://www.epnnews.com/news/photo/202009/5344_6506_3653.jpg'
    },{
        name: '사막여우',
        url: 'https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202105/12/humoruniv/20210512080207323tvqg.jpg'

    }]

    let container={
        display:'flex',
        flexDirection : 'row'
    }

  return (
    <div style={container}>
        {member.map(item => (<PhotoCard key={item.name} item={item}/>))}
    </div>
  )
}

export default Ex05

<PhotoCard.js>

import React from 'react'

const PhotoCard = (props) => {
    console.log('넘어온 값', props)

    let boxStyle= {
        display:'flex',
        flexDirection : 'column',
        alignItems : 'center',
        justifyContents: 'center',
        border : '1px solid black'
        
    }

    let imgStyle = {
        height: '200px'
    }

  return (
    <div style={boxStyle}>
        {props.item.name}
        <img style={imgStyle} src={props.item.url}></img>
    </div>
  )
}

export default PhotoCard