html을 반복문으로 줄이고 싶으면 map

오늘의 숙제 : 

하단 참고 

---

/list 페이지에 실제 데이터를 넣어봅시다
= 상품목록 페이지에다가 실제 데이터 집어넣어보기

실제서비스였으면 DB에서 데이터를 뽑아서 보여줬을 텐데 

처음부터 복잡하게 코드짜면 이해 안되니까 나중에 하기로 하고

상품목록 페이지에다가 변수 하나 생성

= let 상품 

export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div> 
    (생략)

▲ 우선 /list 페이지에 변수로 하드코딩해놓읍시다.

DB에서 데이터 가져와도 이렇게 array 자료에 담겨있는 경우가 많으니

DB에서 가져왔다치고 이걸 html에 넣어봅시다. 

 

실제로 DB 데이터를 갖고왔다고 쳐도 이렇게 변수에 저장이 돼있음. 

---

array 자료형 

자바스크립트 배우고 오랬는데 분명 안배우고 듣는 사람들이 있기 때문에

array 문법에 대해 잠깐 설명하고 지나갑시다. 

변수문법을 사용하면 문자나 숫자 등을 잠깐 보관해둘 수 있습니다. 

근데 변수 하나에 여러개의 문자나 숫자를 쑤셔넣어 보관하고 싶은 경우 array 자료형을 사용하면 되겠습니다.

let a = [10, 20, 30];
let b = ['김', '이', '박'];

대괄호 열고 자료들을 콤마로 구분해서 여러개 넣으면 됩니다.

나중에 array 안에 있는 자료를 뽑아서 사용하고 싶으면 

변수명 뒤에 [자료순서]를 붙이면 나옵니다. 

let a = [10, 20, 30];
console.log(a[0])

예를 들어

a[0]이라고 쓰면 10이 그 자리에 나옵니다. 

a[1] 이라고 쓰면 20이 그 자리에 나옵니다. 

진짠지 출력해봅시다. 

(컴퓨터는 0부터 세기 때문에 첫 자료는 0번째 자료임)

let a = [10, 20, 30];
a[0] = 100;
console.log(a[0])

array 자료 수정이나 추가는 등호로 하면 됩니다.

 

지금은 상품이 한두개 밖에 없는데 상품도 3개 전부 만들어봅시다.

그럼 지금 let 변수 안에 저장해 놨던 상품명들을 

html 안에 보여주고 싶으면 어떻게 코드짜야할까요? 

보지말고 직접해보십쇼

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] } $40</h4>
      </div>
      <div className="food"> 
        <h4>{ 상품[2] } $40</h4>
      </div>
    </div>
  )
}

변수를 html에 넣고 싶으면

jsx 문법으로 중괄호 열어서 변수넣으면 된다고 했습니다. 

 

[collapse]

---

반복적인 html을 줄이고 싶으면 map 반복문

프로그래밍할 때 for 문법 같은거 쓰면 비슷한 코드를 짧게 축약할 수 있습니다. 

for 쓰면 그 안에 담긴 코드를 원하는 갯수만큼 복붙해주니까요. 

그래서 비슷한 html이 있으면 그것도 반복문으로 축약해볼 수 있습니다. 

 

하지만 JSX 안에는 for 같은 문법을 사용할 수 없기 때문에 보통 map()을 써서 반복문을 구현합니다.

그래서 map 사용법 좀 먼저 알아봅시다. 

---

자바스크립트 map 함수 쓰는 법 

모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다. 

자바스크립트 기본함수 같은건데 용도를 알아봅시다. 

이렇게 써주고

map 소괄호 안에다가

function() {} 이렇게 콜백함수 넣어줌.

~~~ 이 부분에 코드 자유롭게 작성 가능.

그러면 저 코드를 반복 실행해준다.

어레이 자료 안의 개수만큼 반복 실행해줌.

map 함수 안에 파라미터 2가지를 넣어 줄 수 있음.

이 a 는 array 안에 있던 자료들을 나타냄.

2, 3, 4 

i 의 역할

그냥 인덱스 

그냥 return 도 이렇게 집어넣을 수 있음.

return 오른쪽에다가 이렇게 맘대로 자료 집어넣을수 있음 

이렇게 되면 10이 담긴 array 를 생성해줌.

어레이 개수만큼 실행됨 

즉, 3번 실행됨.

진짜인 지 확인하기 위해

b 변수에 담음. 

이제 map 함수 html 있는 곳에 갖다 써보기

중괄호 써서 열어준 다음 안에 적어주면 됨.

array 자료 뒤에다가 붙여서 적어주면 됨. 

이렇게 써 놓고 시작하면 됨.

그리고 반복적으로 생성되는 html 덩어리를 찾아옴.

그리고 return 소괄호 안에다가 집어넣음.

나머지 코드는 쓸 데 없으니까 지워버림. 

만약 return 을 안 써줄 경우,

컴퓨터가 그냥 읽고만 지나가게됨.

꼭 써주자

---

let 어레이 = [2,3,4];
어레이.map(()=>{
  console.log('안녕')
});

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.

저러면 진짜로 console.log('안녕') 3번 실행됨 

 

let 어레이 = [2,3,4];
어레이.map((a)=>{
  console.log(a)
});

기능 2. 콜백함수에 파라미터 아무렇게나 작명하면 (그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)

그 파라미터는 반복실행될 때 마다 차례로 array 안의 자료들을 하나씩 넣어줍니다. 

1회 반복시 a는 2가 되고

2회 반복시 a는 3이 되고

3회 반복시 a는 4가 됩니다.

그래서 저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 

 

var 어레이 = [2,3,4];
var newArray = 어레이.map((a)=>{
  return a * 10
});
console.log(newArray)

기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다.

그리고 map() 쓴 자리에 남겨줍니다.

그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 하는군요 

newArray는 [20, 30, 40] 이 출력됩니다. 

 

export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut']
  return (
    <div> 
      <h4 className="title">상품목록</h4>
      { 
        상품.map(()=>{
          return ( 
            <div className="food"> 
              <h4>{ 상품[0] } $40</h4>
            </div>
          )
      }) }
    </div>
  )
}

▲ 그럼 이렇게 map 가져다쓰면 <div>를 3개나 반복생성 해주지않을까요?

맞습니다. 왜죠?

map 쓰고 나면

[ <div></div>, <div></div>, <div></div> ] 이게 그 자리에 남아서 그런듯요 

그리고 html이 담긴 array는 그대로 JSX에 넣어버려도 알아서 출력 잘 해줍니다.

미리보기 띄워서 확인해봅시다. 

Q. 지금은 똑같은 상품명만 3개 보이고 있는데

각각 'Tomatoes', 'Pasta', 'Coconut' 상품명을 보여주려면 어떻게 해야할까요?

다음 시간까지 알아서 해결해보십시오. 

 

Q. 저는 for 문법 좋아하는데 그거 쓰면 안되나요?

- html 부분 바깥에서 for 써서 결과를 array에 담은 후에 그 결과를 html에 집어넣는 식으로는 가능합니다. 

 

---

그래서 오늘의 결론은 

array자료가 필요하면 자유롭게 활용하면 되고 

map 반복문으로 html을 반복생성하면 편할 수도 있으니까 필요하면 사용합시다.

---

 

오늘의 숙제 : 

지금 같은 Tomatoes라는 상품명만 3번 보이고 있는데 

각각 다른 상품명을 보여주고 싶으면 어떻게하게요

export default function List() {
  let 상품 = ["Tomatoes", "Pasta", "Coconut"];
  return (
    <div>
      <h2 className="title">상품목록</h2>
      {상품.map((a, i) => {
        return (
          <div className="food">
            <h4>{상품[i]} $40</h4>
          </div>
        );
      })}
    </div>
  );
}