map()함수로 제작된 태그에 i값으로 인한 속성부여?

(10-03 JSX Loop3의 index.js에서)

Q1.

/**
 * JSX 반복 처리(3) - map() 함수를 사용한 배열 원소 탐색 축약형
 */
import React from "react";

const Loop3 = () => {
    // 화면에 표시할 데이터
    const seasons=['봄','여름','가을','겨울'];

    return(
        <div>
            <h1>Loop3</h1>
            <table border='1'>
                <tbody>
                    <tr>
                        {/* seasons.map((v,i) => {
                            return<td key={i}>{v}</td>;
                        })*/}
                        {seasons.map((v,i)=> <td key={i}>{v}</td>)}
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export default Loop3;

여기에서, 

{seasons.map((v,i)=> <td key={i}>{v}</td>)}

 

저렇게 td 태그를 만들면, 만들어진 td 태그에 따로 속성같는게 붙는거야?

 

 

 

A1.

네, 그렇게 <td> 태그를 생성하면 따로 속성이 붙지 않습니다. key 속성은 React에서 내부적으로 사용되며 실제 DOM에는 렌더링되지 않습니다. 따라서 생성된 <td> 태그에는 지정하지 않은 추가 속성이 없습니다.

 

 

 

Q2.

그럼 그냥 <td>v에 해당한 내용</td> 이렇게 나오는거야?

 

 

 

A2.

네, 그렇습니다. 그렇게 하면 각 <td> 태그는 {v}의 값으로 채워지고, 추가적인 속성 없이 단순히 <td>값</td> 형태로 렌더링됩니다.

 

 

 

Q3.

그럼 저기서 i값은, 그저 반복문에서, 서로 다른 td 태그를 만들어내기 위해서 쓰일 뿐인 것인가?

 

 

 

A3.

네, 맞습니다. 여기서 i 값은 map 함수의 각 반복에서 고유한 <td> 태그를 생성하기 위해 사용됩니다. 특히 React에서는 리스트 아이템을 렌더링할 때 각 요소에 고유한 key prop을 지정해야 하는데, 이때 i를 key로 사용하여 각 <td>에 고유성을 부여합니다. 따라서 i는 반복문에서 서로 다른 <td> 태그를 만들기 위한 용도로 사용됩니다.

 

 

 

Q4.

하지만 실제로 작성되는 td태그에는, 클래스나 네임 등의 속성값들은 전혀 없는거고?

 

 

 

A4.

네, 맞습니다. 현재 작성된 코드에서는 실제로 생성되는 <td> 태그에 class나 name 등의 속성은 전혀 포함되어 있지 않습니다. key 속성은 React에서 리스트 항목을 추적하기 위한 내부 용도로 사용되며, 실제 DOM에 렌더링될 때는 해당 속성이 나타나지 않습니다. 따라서 <td> 태그에는 추가적인 속성이 없으며, 단순히 <td>{v}</td> 형태로 렌더링됩니다.