programming/JavaScript

[html/next.js] array 문법&반복문 map()

Jofresh 2023. 5. 10. 20:00
728x90
반응형

 

export default function List() {
    let 상품 = ['tomatoes','pasta','coconut']

    return (

      <div>
        <h4 className="title">상품목록</h4>
        <div className="food">
            <h4>{상품[0]} $40</h4>
        </div>
        <div className="food">
            <h4>{상품[1]} $50</h4>
        </div>
        <div className="food">
            <h4>{상품[2]} $50</h4>
        </div>
      </div>
  
    )
  }

 

위 코드는 List 컴포넌트를 정의하고, 해당 컴포넌트 내부에서 let 상품 = ['tomatoes','pasta','coconut'] 문장을 통해 상품 리스트를 배열로 선언합니다.

이후 JSX 코드 내부에서 상품 리스트를 출력하기 위해 map 함수를 사용하는 대신, 각각의 상품을 배열의 인덱스를 이용하여 출력합니다. 이 때, {상품[0]} $40, {상품[1]} $50, {상품[2]} $50과 같이 상품의 이름과 가격을 하드코딩하여 출력합니다.

이 방식은 상품 리스트가 변경되거나 상품의 수가 많아질 경우 코드를 변경해야 하기 때문에 확장성이 떨어지는 방식입니다. 따라서, 상품 리스트를 데이터로부터 동적으로 불러오도록 구현하는 것이 더 좋은 방법일 수 있습니다.

 

 

 

결과값

 

근데 상품이 1000개 10000개라면?!

map() 문법 사용 [반복문 for와 비슷한]

map()의 기능
JavaScript에서 map()은 배열의 각 요소를 변환하여 새로운 배열을 생성합니다.

map()은 콜백 함수를 인자로 받아서 배열 요소를 변환한 결과를 새로운 배열에 저장합니다. 인자로 받는 콜백 함수는 현재 요소, 요소 인덱스, 그리고 원래 배열 전체를 인자로 받아서 실행됩니다.

예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다.

const numbers = [1, 2, 3, 4, 5];
이 배열의 모든 요소를 제곱하여 새로운 배열을 생성하고 싶다면 map()을 사용할 수 있습니다.


const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

map()은 원래 배열을 변경하지 않으며, 새로운 배열을 반환합니다. 이렇게 변환된 새로운 배열을 변수에 할당하거나, 직접 사용할 수 있습니다.

 

위 코드에서 아래와 같이 변경했습니다. 

export default function List() {
    let 상품 = ['tomatoes', 'pasta', 'coconut']


    return (
        <div>
            <h4 className="title">상품목록</h4>
            {
                상품.map((a, i) => {
                    return (
                    <div className="food">
                        <h4>{상품[i]} $40</h4>
                    </div>
                    )
                })
            }

        </div>

    )
}

위 코드는 map() 함수를 사용하여 상품 배열의 각 항목을 반복하고, 각 항목마다 <div> 요소와 <h4> 요소를 생성합니다. 이렇게 생성된 각각의 <div> 요소는 각 상품명과 가격을 보여주게 됩니다.

map() 함수는 배열 요소를 반복하면서 새로운 배열을 생성합니다. 이때, 새로운 배열의 각 항목은 기존 배열의 항목에 대한 변환 결과로 생성됩니다.

위 코드에서는 map() 함수를 사용하여 배열 요소를 반복하고, 각 항목마다 새로운 요소를 생성하여 배열에 추가합니다. 반환된 배열은 JSX 문법으로 작성된 컴포넌트로 렌더링되어 화면에 출력됩니다.

현재 h4 태그 안에 {상품[i]}가 입력되어 있는데, 이것을 {a}라고 변경해도 동일하게 작동합니다.




 

728x90
반응형