[ReactJS] 5장 리스트와 키

1.List (리스트)

React의 List(리스트)는 배열 데이터를 기반으로 여러 개의 요소를 렌더링 할 때 사용됩니다. React에서 리스트를 생성할 때에는 보통 map 메서드를 사용해 배열의 각 요소를 React 컴포넌트로 변환할 때 사용합니다.

import React from 'react';

function List() {
  const list = ['딸기', '사과', '바나나'];
  return (
    <ul>
      {list.map((list) => (
        <li key={list}>{list}</li>
      ))}
    </ul>
  );
}
export default List;

 

위 예시 코드는 list에 과일을 각각 <li> 태그로 변환해 리스트를 생성하는 코드로, 이와 같이 데이터를 동적으로 렌더링할 수 있습니다. 리스트로 이미지 URL을 배열로 관리해, 리스트 형태로 렌더링하는 코드도 작성할 수 있습니다.

import React from 'react';
import image1 from './img/Profile.jpg';
import image2 from './img/React.png';
import image3 from './img/TypeScript.png';

const images = [
  { id: 1, url: image1, title: 'image1' },
  { id: 2, url: image2, title: 'image2' },
  { id: 3, url: image3, title: 'image3' },
];

function ListImage() {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        margin: 'auto',
      }}
    >
      <h2>FrontEnd Developer language</h2>
      <ul style={{ listStyleType: 'none', padding: 0, display: 'flex' }}>
        {images.map((image) => (
          <li key={images.id} style={{ margin: '10px' }}>
            <p>{image.title}</p>
            <img
              src={image.url}
              alt={image.title}
              style={{ width: '200px', height: '200px' }}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ListImage;

---

2.키(Key)

키는 리스트의 각 요소에 대해 고유성을 부여하는 식별자로, React는 리스트의 요소를 효율적으로 업데이트하기 위해  키를 사용합니다. 키가 없거나 잘못된 경우, 각 요소를 다시 렌더링할 때 성능 저하 문제가 발생할 수 있습니다.

 

• 키의 중요성
  
  • 성능 최적화: React는 키를 사용해 각 요소의 상태를 추적, 이를 통해 변경된 부분만 업데이트, 나머지는 그대로 두면서 성능을 향상
  • 고유성: 리스트의 각 요소에는 고유한 키를 가져야 하며, 일반적으로 데이터베이스의 ID나 고유한 문자열을 사용하는 것이 좋음, 인덱스를 키로 사용하는 것은 일반적으로 피하는 게 맞음

import React from 'react';

function ListKey() {
  const List = [
    { id: 1, name: 'Django' },
    { id: 2, name: 'Props' },
    { id: 3, name: 'C++' },
  ];
  return (
    <ul>
      {List.map((List) => (
        <li key={List.id}>{List.name}</li>
      ))}
    </ul>
  );
}

export default ListKey;

 

키 사용시 주의 사항

• 고유성 유지: 리스트의 각 항목에 항상 고유한 키를 가져야 한다
• 인덱스 사용 피하기: 요소의 순서가 변경될 수 있는 리스트에 인덱스를 키로 사용하면 문제가 발생할 수 있음, 예를 들어 요소가 추가되거나 삭제될 경우, 인덱스가 변경되어 잘못된 요소가 업데이트될 수 있음

예제로 사용자가 과일을 추가할 때마다 리스트가 업데이트되는 코드도 작성할 수 있습니다.

import React, { useState } from 'react';

export default function ListUpdate() {
  const [fruits, setFruits] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addFruit = () => {
    const newFruit = {
      id: Date.now(), // 각 항목에 고유한 ID를 부여
      name: inputValue,
    };
    setFruits([...fruits, newFruit]);
    setInputValue('');
  };
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add a Fruit"
      />
      <button onClick={addFruit}>Add Fruit</button>
      <ul>
        {fruits.map((fruits) => (
          <li key={fruits.id}>{fruits.name}</li>
        ))}
      </ul>
    </div>
  );
}

이 예제에는 사용자가 입력한 과일을 리스트에 추가해 고유한 ID를 키로 사용해 리스트를 렌더링하는 과정이며, 이를 통해서 React가 각 요소의 상태를 효율적으로 관리할 수 있습니다.

---

요약

• 리스트: 배열 데이터를 기반으로 여러 요소를 렌더링할 때 사용하며, map 메서드를 자주 사용
• 키: 각 리스트 항목의 고유성을 보장, React의 성능을 최적화하는 데 필수적임

GitHub - Koras02/react-bloging: https://thinky.tistory.com/category/Front-End/ReactJS