[ React / .map() ] 상수 데이터 / .map() 에서 key 값 지정

상수 데이터란

• 변하지 않는 데이터 ( 정적인 데이터 )
• ui 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다.

상수 데이터를 사용하는 이유

• 가독성 및 유지보수성 향상: 상수는 대문자 + 스네이크 케이스(_)를 활용하여 가독성을 높이고 유지보수를 쉽게 만든다. 코드에서 특정 값이 상수로 정의되어 있으면, 해당 값의 의미가 명확해지며 코드를 이해하기 쉬워진다.
• 오타 및 실수 방지: 상수를 사용하면 특정 값을 여러 곳에서 사용할 때 일관성을 유지할 수 있다. 그리고 상수는 수정이 불가능하므로 ( 추가는 OK ) 다른 곳에서 값이 실수로 변경되는 것을 방지할 수 있다.
• 중복된 코드 제거: 상수를 사용하면 동일한 값을 여러 곳에서 사용할 때 해당 값을 상수로 정의해 중복 코드를 방지할 수 있다. 이것은 코드의 길이를 줄이고 유지보수를 간편하게 만든다.
• 값 변경의 용이성 제어: 상수는 선언된 후 값이 변경되지 않는다. 이것은 프로그램의 예측 가능성을 높이고 의도치 않은 값 변경으로 인한 버그를 방지한다.
• 코드 분석 및 도구 지원: 상수를 사용하면 코드 분석 도구나 통합 개발 환경(IDE) 등이 코드를 더 잘 이해하고 지원할 수 있다. 예) IDE는 상수를 사용한 변수에 대한 코드 언어 서비스를 제공할 수 있다.

React나 다른 프로그래밍 환경에서 상수 데이터를 사용하면 이러한 이점들을 활용하여 코드의 가독성과 유지 보수성을 향상할 수 있다.

 

. map()에서의 KEY

// 상수 데이터 정의
const SOME_TEXT = [
  { /* 데이터 1 */ },
  { /* 데이터 2 */ },
  // ...
];

// React 컴포넌트에서 상수 데이터 사용
function MyComponent() {
  return (
    <div>
      {SOME_TEXT.map((site, index) => (
      	<ul>
        	<li {key={index}}>...</li>
          {/* ... */}
		</ul>
      ))}
    </div>
  );
}

 

React에서 '.map' 메서드를 사용할 때 각 요소에 고유한 키 값을 제공하는 것은 중요하다.

key 값을 정의하지 않으면 오류가 나는데 위에 내용처럼 'index'를 활용할 수 있다.

 

주의사항

'index'를 key로 지정 할경우 배열의 순서가 변경될 때 React가 렌더링을 재조정하는 데에 있어서 일부 문제가 발생할 수 있다. 만약 배열의 순서가 변경되거나 항목이 사용자에게 추가 or 삭제되는 경우, React는 각 요소의 'key'를 다시 할당해야 하기 때문에 성능 저하가 발생할 수 있다.

 

그렇기 때문에 추가/삭제되는 엘리먼트라면 id값 또는 식별할수 있는 값을 넣어야 한다.

 

.map() 에서의 key 값 지정  결론

 

1. 엘리먼트를 사용자가 추가/삭제하는 경우 - index 사용 금지 -> id 또는 식별할 수 있는 값 지정

2. 엘리먼트가 변하지 않는 경우 - index 사용

(react fiber architecture로 변경되면서 렌더링 로직이 변경되었다.)