Component List

Component를 수동 구현

• 수동으로 데이터의 개수만큼 Component를 구현

import React from "react";

function App() {
  return <Hello name={["H", "E", "L", "L", "O"]} />;
}

function Hello({ name }) {
  return (
    <div>
      <h1>안녕, {name[0]}</h1>
      <h1>안녕, {name[1]}</h1>
      <h1>안녕, {name[2]}</h1>
      <h1>안녕, {name[3]}</h1>
      <h1>안녕, {name[4]}</h1>
    </div>
  );
}

export default App;

Component List로 구현

• map 메소드를 이용하여 Component를 구현

import React from "react";

function App() {
  return <Hello name={["H", "E", "L", "L", "O"]} />;
}

function Hello({ name }) {
  return (
    <div>
      {name.map((e, i) => (
        <h1>안녕, {e}</h1>
      ))}
    </div>
  );
}

export default App;

info

Component List 사용의 차이점

Component List 없이 구현 시, 배열의 요소가 추가/삭제 작업이 발생하면 수동적으로 코드 수정을 해야한다.
반면 Component List로 구현 시, 배열의 요소가 추가/삭제가 되더라도 자동으로 렌더링이 되어 출력이 가능하다.
즉, Component List를 이용 시, 효율적이고 유지보수 하기가 좋아진다.

Component List key

• map을 이용시 Component List를 생성할 요소에 key라는 속성을 이용
• key속성이 없을 경우, 경고를 발생
• key는 요소의 고유 값

import React from "react";

function App() {
  return <Hello name={["H", "E", "L", "L", "O"]} />;
}

function Hello({ name }) {
  return (
    <div>
      {name.map((e, i) => (
        <h1 key={i}>안녕, {e}</h1>
      ))}
    </div>
  );
}

export default App;

key 속성이 없을 경우

• Component의 위치(index)를 기준으로 변경
• Virtual DOM을 통해 변경을 관리하고 필요한 요소만을 실제 DOM에 업데이트

note

<h1> 중 참가번호 2번을 지운다고 가정

<h1>참가번호 1번</h1>
<h1>참가번호 2번</h1>
<h1>참가번호 3번</h1>
<h1>참가번호 4번</h1>

태그 요소들의 트리를 탐색 과정 중 참가 번호 2번 요소 위치에서 삭제 후, 참가 번호 3번 요소를 추가
원본 참가 번호 3번 위치의 요소를 삭제 후, 참가 번호 4번요소를 추가 및 마지막 참가 번호 4번을 삭제

즉, key속성이 없기 때문에 참가번호 2번요소를 삭제 한 후,
뒤에 있는 요소들을 앞으로 당겨 업데이트 작업을 하기 때문에 참가번호 2번, 3번, 4번 요소가 업데이트에 반영된 것이다.

key속성이 있는 경우

• key를 사용하여 Component를 식별하고 위치(index)를 기준으로 변경을 관리
• Virtual DOM을 통해 변경된 부분만을 실제 DOM에 업데이트하며, 이를 통해 불필요한 작업을 최소화하여 성능을 향상

note

<h1> 중 참가번호 2번을 지운다고 가정

<h1 key="0">참가번호 1번</h1>
<h1 key="1">참가번호 2번</h1>
<h1 key="2">참가번호 3번</h1>
<h1 key="3">참가번호 4번</h1>

참가번호 2번은 key의 값이 "1"을 보유하고 있다.
key값이 "1"인 요소를 삭제 후, key값이 "2", "3"인 요소는 생성 및 삭제 작업을 하지 않고 해당 위치로 당겨진다.

즉, key의 속성이 존재할 경우 기존에 생성된 요소에 불필요한 작업없이 위치만 변경이 가능하기 때문에 성능을 향상시킨다