9. map 함수 (같은 html 반복 생성) + 각각 숫자 플러스, 고유한 key 값

 

특징

 

1. array 자료 개수만큼 함수 안의 코드를 실행해준다.

[1, 2, 3].map() function() {
    console.log(1)
}

// 출력값 : 1 1 1

 

2. 함수의 파라미터는 array 안에 있던 자료다.

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

// 출력값 : 1 2 3

 

 

3. return 값에 적어주면 array 로 담아준다.

[1, 2, 3].map() function(a) {
    return ('456')
}

// 출력값 : ['456', '456', '456']

 

---

 

 반복되는 html 출력하기 

 

// App.js

function App() {

    let [title, setTitle] = useState(['첫번째 제목', '두번째 제목', '세번째 제목']);
    
    <div className="list">
        <h4>{ title[0] }</h4>
    </div> 
    <div className="list">
        <h4>{ title[1] }</h4>
    </div> 
    <div className="list">
        <h4>{ title[2] }</h4>
    </div> 

}

 

map을 사용하여 아래와 같이 구현할 수 있다.

 

 

방법 ① 

{
    title.map(function(t){
        return (
            <div className="list">
                <h4>{ t }</h4>
            </div>
        )
    })
}

 

 

방법 ②

 

{
    title.map(function(t, i){
        return (
            <div className="list">
                <h4>{ title[i] }</h4>
            </div>
        )
    })
}

 

 map 함수의 두번째 파라미터는 반복문이 돌 때마다 0부터 (array 개수)-1 까지 증가하는 수 이다.

따라서 i 만 따로 본다면 0, 1, 2 이다.

 

 

 

만약 좋아요 버튼도 구현하려면 다음과 같이 구현하면 된다.

let [like, setLike] = useState([0, 0, 0]);

{
    title.map(function(a, i){
        return (
            <div className="list" key={i}>
                <h4> { a }<span onClick={()=>{
                    let num=[...like];
                    num[i] = num[i]+1
                    setLike(num);
                }}>👍</span> {like[i]}</h4>
            </div>
        )
    })
}

 

 

 key={i} 사용이유 
: 반복문 돌릴 때마다 생성된 html 은 고유한 key 값을 가져야하기 때문이다.