08. 반복문 쓰기

본론

map 함수 사용법

 

코드를 짜다보면 똑같이 반복되는 부분들이 많이 생길 수 있는데 중복되는 부분들은 하나로 합쳐서 사용하게 되면 훨씬 코드 양도 줄어들고 깔끔하게 코드를 짤 수 있다. 보통 for를 이용해서 반복문을 짜는데 JSX 중괄호 안에서는 for를 사용할 수 없어서 map()을 사용해야 한다.

 

모든 array 자료 우측에는 map 함수를 붙일 수 있다.

1. array에 들어있는 자료 갯수만큼 코드를 반복실해준다.

let array = [1,2,3]
array.map(function(){
	console.log(1)
});

//1이 3번 찍힘

 

2. 콜백함수에 파라미터를 아무거나 넣게되면 array 안에 있던 모든 자료를 하나씩 출력해준다.

let array = [1,2,3]
array.map(function(a){
	console.log(a)
});

//1, 2, 3이 찍힘

 

3. return 선언을 하게 되면 array에 값을 담아서 반환해준다.

let array = [1,2,3]
let newArray = array.map(function(a){
	return a * 10
});
console.log(newArray)
//10, 20, 30 찍힘

 

 

JSX 내에서 html 반복생성하기

 

위 map을 사용해서 간단하게 생성할 수 있다. 

function App() {
  return ({
    <div>
      {
        [1,2,3].map(function(){
          return <div>Hello</div>
        })
      }
    </div>
  })
}

 

위 코드를 실행해주면 [<div>Hello</div>,<div>Hello</div>,<div>Hello</div>]가 남는다. 따라서 map을 사용해서 html 반복생성이 가능하다.

 

블로그 글 목록을 반복문으로 축약하는 것 역시 똑같은 절차를 따르면 된다.

function App() {
	return (
      {
        title.map(function() {
          return (
            <div className="list">
            <h4>{title[0]}</h4>
            <p>2월 17일 발행</p>
          </div>
          )
        })
      }
  )}

 

이렇게 map함수를 이용하면 글목록이 3개 생성된 모습을 확인할 수 있는데 현재 글제목을 title[0]라고 명시해놔서 모든 글제목이 똑같이 보인다. 이를 title 배열의 값 하나하나를 가져와 띄우고 싶다면 두 가지 방법을 사용할 수 있다.

function App() {
	return (
      {
        title.map(function(a) {
          return (
            <div className="list">
            <h4>{a}</h4>
            <p>2월 17일 발행</p>
          </div>
          )
        })
      }
  )}

function App() {
	return (
      {
        title.map(function(a, i) {
          return (
            <div className="list">
            <h4>{title[i]}</h4>
            <p>2월 17일 발행</p>
          </div>
          )
        })
      }
  )}

 

위 코드는 파라미터에 아무 값이나 작명을 해주면 배열 안의 값들을 하나하나 불러온다는 특성을 이용한 방법이고 두 번째 코드는 파라미터를 2개까지 작명할 수 있는데 첫번째 a는 배열 안에 있던 자료, 두번째 i는 0부터 1씩 증가하는 정수가 된다. 따라서 title[i]라는 것은 title[0], title[1], title[2]를 의미하는 것이다.

 

** 참고

map 반복문으로 반복생성한 html에는 key={} 이런 속상을 추가하여 key 값을 넣어줘야 한다. 그래야 리액트가 div들을 각각 구분할 수 있고, 없으면 warning을 띄워준다.

<div className="list" key={i}>

 

 

** 실습

글제목 옆에 좋아요를 누르는 곳까지 함께 반복문으로 묶여서 표시가 되고 있는데 문제는 버튼을 눌렀을 때 모든 좋아요 갯수가 같이 올라간다는 점이다. 개별적으로 좋아요를 증가하게 해야한다.

 

이 부분은 앞서 배운 array 변경 방법을 참고해서 코드를 짜봤다. 

      {/* 코드 반복문 */}
      {
        title.map(function(a, i) {
          return (
            <div className="list">
            <h4>{title[i]} 
            <span onClick={()=>{
              let copy = [...like];
              copy[i] = copy[i] + 1;
              updateLike(copy)
              }}>♥️</span> {like[i]}</h4>
            <p>2월 17일 발행</p>
          </div>
          )
        })
      }

 

앞서 배운 spread 문법을 이용해 copy 본 배열을 하나 생성해두고 반복문이 돌 때 마다 i번째 값에서 1을 더하도록 설정했다. 다음 state 변경함수를 이용해서 새로 생성한 배열을 state에 넣어두면 개별적으로 좋아요 갯수가 상승할 수 있다.