React - 컴포넌트 반복

1. 목록 요소들을 반복처리 할때는 map함수를 이용한다.
2. 반복 컴포넌트에는 반드시 key props를 전달해야 한다.

map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용

array.map(callbackFunction(currenValue, index, array), thisArg)

• currenValue: 현재값
• index: 현재인덱스
• array: 현재배열,
• thisArg: callbackFunction 내에서 this로 사용될 값

filter - 요소 개수만큼 반복하며 boolean으로 리턴된 결과를 사용해서 새로운 list를 만듦

array.filter(callbackFunction(currenValue, index, array), thisArg)

• currenValue: 현재값
• index: 현재인덱스
• arrayt: 현재배열
• thisArg: callbackFunction 내에서 this로 사용될 값

 

map의 사용(1)

// 상위
import IterationComponent from "./component/IterationComponent"
function App() {
  return (
    <div>
      <h3>컴포넌트 반복</h3>
      <IterationComponent/>
    </div>
  )
}
export default App

// 하위
function IterationComponent() {
  // 맵 -> 콜백함수의 리턴에 담긴 값으로 새로운 배열을 만들어냄
  const arr = [1,2,3,4,5]
  
  const lis = arr.map( (v, i) => <li>{v}입니다</li> ) // li태그 반복생성

  return (
    <ul>
      {lis}
    </ul>
  )
}

export default IterationComponent

 

결과

 

 

map의 사용(2)

- filter 사용

- li 반복출력(li 추가 및 삭제)

// 상위 생략
import { useState } from "react";

function IterationComponent2() {

  // state로 관리할 배열을 하나 생성
  const data = [
    {id: 1, topic: "hello"},
    {id: 2, topic: "bye"},
    {id: 3, topic: "안녕"}
  ]

  const [list, setList] = useState(data) // 할일목록
  const [topic, setTopic] = useState("") // 인풋데이터

    // 삭제기능 - 익명함수(위쪽에 선언)
    let handleRemove = (id) => {
      // filter -> 리턴 true인 값으로 필터링
      // state값을 필터링

    const newList = list.filter(item => item.id !== id)
    setList(newList);
    }
  
  // state를 반복으로 돌려서 li로 출력
  // 대상을 클릭할 때, 해당 태그에서 id를 넘겨주는 방법
  const lis = list.map( a => <li key={a.id}
                                  onDoubleClick={ () =>  handleRemove(a.id)}>
      {a.topic}
    </li>)

  // 인풋데이터핸들링
  let handleInput = (e) => {
    setTopic(e.target.value)
  }

  // 클릭이벤트핸들링 -> input 데이터를 {id: ~, topic: 인풋데이터} -> list에 반영
  let handleClick = () => {
    let obj = {id: list[list.length - 1].id + 1, topic: topic}

    let newList = list.concat(obj); //합쳐서 new 배열 반환
    setList(newList);
  }

  return (
    <div>
      <h3>할일몰록 추가 or 삭제하기</h3>

      <input type="text" name="topic" onChange={handleInput} value={topic} placeholder="할일목록을 적으세요"></input>
      <button type="button" onClick={handleClick}>추가하기</button>

      <ul>
        {lis}
      </ul>
    </div>
  )
}

export default IterationComponent2

 

추가 가능, 더블클릭 시 삭제

 

 

map의 사용(3)

- 이미지 클릭 시, 해당 이미지로 변경

// import img1 from '/img/img1.png'

import { useState } from "react"

function IterationComponentQ() {

  /*
  img or css파일 참조하는 방법 - 2가지 방법
  만약, src폴더에 넣는 경우 - import문장
  2. public폴더에 넣는 경우 - 경로참조만 시켜주면 됨
  */
  const arr = [
    {src : '/img/img1.png', title : '아이폰10', price: 1000},
    {src : '/img/img2.png', title : '아이폰11', price: 2000},
    {src : '/img/img3.png', title : '아이폰12', price: 3000},
    {src : '/img/img4.png', title : '아이폰13', price: 4000},
  ]

  const [list, setList] = useState(arr);
  const [img, setImg] = useState("/img/img1.png")


  let handleImg = (e) => {
    setImg(e.target.src)
  }

  const newList = list.map( item => <div key={item.src}>
                      <img src={item.src} onClick={handleImg}/>
                      <p>{item.title}</p>
                      <p>{item.price}</p>
                    </div>
          )

  return (
    // <img src={img1} alt="이미지1" />
    // <img src={"/img/1.png"}/>
    <>
      <img src={img}/>
      <div style={{display: "flex", justifyContent: "space-around"}}>
          {newList}
      </div>
    </>
  )
}

export default IterationComponentQ

 

결과

이미지 클릭 시, 상단 이미지가 변한다

 

끝!