[React] Map을 리액트에서 사용할때 - 리스트를 반환한다매! 근데 왜 UI가 반복적으로 출력됨? 얘는 리스트가 아니잖아

안녕하세요? 좀 더 발전해온 블로그 주인장입니다.

저번에 map 함수에 대해 알아보았는데, 키값을 왜 사용하는지도 몰랐고,

그냥 단순히 "이렇게 사용한다" 라고만 작성했는데

이제 이 친구에 대해 조금은 알 것 같아요.

 

오늘은 

Map

에 대해 다시 알아보겠습니다.

---

1. Map 을 어디서 사용할까?

투두리스트를 만든다. 할일이 많아서 할 일을  많이 추가할것이다.

그런데 그럴때마다 <div>공부하기</div><div>마라탕먹기</div>...

계속 추가추가하면 보기도 싫고 나중에 관리하기도 힘들겠지.

 

그래서 할일이 담긴 데이터를 만든다.

  todoData = [
    { 
      id: 1, 
      title: "공부하기", 
      completed: false 
    },
    {
      id: 2, 
      title: "마라탕먹기", 
      completed: false
    }
  ]

이렇게

 

그리고 아래처럼 사용한다. (키값 사용은 나중에 포스팅하겠다.)

{this.todoData.map((data) => (
            <div style={this.getStyle()} key={data.id}>
              <input type="checkbox" defaultChecked={false} />
                {data.title}
              <button style={this.btnStyle}>X</button>
            </div>
          ))}

클래스형 컴포넌트 작성법에 대해서도 공부하는중이라 this가 껴있다.

 

그런데 내가 알기로 map은 기존 배열 +  변환된 값 => 새로운 배열을 반환하는걸로 알고 있었는데

저 코드가 새로운 배열을 반환하는건지..?에 의문이 생겼다.

"리스트를 반환한다매! 근데 왜 UI가 반복적으로 출력됨? 얘는 리스트가 아니잖아"

const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

내가 아는 map은 이거였는데

---

2. React에서 Map 을 사용할 때

React에서는 map을 활용해 배열 데이터를 반복 처리하며 JSX 요소를 반환한다.

[
  <div key={1}>
    <input type="checkbox" defaultChecked={false} />
    공부하기
  </div>,
  <div key={2}>
    <input type="checkbox" defaultChecked={false} />
    청소하기
  </div>
]

이렇게 말이다.

 

=> 이 배열은 리액트에 의해 DOM으로 렌더링 된다.

 

그런데 내 눈에는 배열로 보이지가 않는다. 저런 div 요소도 배열에 들어갈 수 있나?

React는 map으로 반환된 JSX 배열을 바로 렌더링합니다. map이 반환한 배열을 따로 저장하거나 조작하지 않기 때문에, "새로운 배열이 반환된다"는 점이 잘 드러나지 않는 것입니다.

배열로 반환하지만, 바로 렌더링하여 보이지가 않는것이다.

그러면 새로 반환된 배열이 궁금했다.

    const jsxArray = this.todoData.map((data) => (
      <div style={this.getStyle()} key={data.id}>
        <input type="checkbox" defaultChecked={false} />
        {data.title}
        <button style={this.btnStyle}>X</button>
      </div>
    ));

    console.log(jsxArray);

위의 코드를 작성해서 출력해보자

내가 기대했던 배열의 모양새가 나왔다.

배열이다. 배열이었어

 

• $$typeof: Symbol(react.element)
  • React 요소라는 것을 나타냄
• type:
  • 이 React 요소의 HTML 태그 이름(예: div, input)

 

이게 렌더링되어서 우리가 아는 투두리스트 반복 출력 화면이 구성되는것이다.

 

-끝-

 

 

👇 JSX 배열 형태 구경하기 (토글)👇 

[
  {
    "$$typeof": Symbol(react.element),
    "type": "div",
    "key": "1",
    "ref": null,
    "props": {
      "children": [
        {
          "$$typeof": Symbol(react.element),
          "type": "input",
          "key": null,
          "ref": null,
          "props": { "type": "checkbox", "defaultChecked": false },
          "_owner": null,
          "_store": {}
        },
        "공부하기"
      ]
    },
    "_owner": null,
    "_store": {}
  },
  {
    "$$typeof": Symbol(react.element),
    "type": "div",
    "key": "2",
    "ref": null,
    "props": {
      "children": [
        {
          "$$typeof": Symbol(react.element),
          "type": "input",
          "key": null,
          "ref": null,
          "props": { "type": "checkbox", "defaultChecked": false },
          "_owner": null,
          "_store": {}
        },
        "청소하기"
      ]
    },
    "_owner": null,
    "_store": {}
  }
]