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

2024. 1. 19. 03:19· STUDY 📒/React
목차
  1. 상수 데이터란
  2. 상수 데이터를 사용하는 이유
  3. . map()에서의 KEY
  4. 주의사항
  5. .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로 변경되면서 렌더링 로직이 변경되었다.)

 

 

 

 

 

 

반응형

'STUDY 📒 > React' 카테고리의 다른 글

[React, vite] 이미지 넣는 방법들  (0) 2024.02.21
querySelector, 구조에 종속적이지 않게 가져올 수 있는 방법  (0) 2023.12.29
  1. 상수 데이터란
  2. 상수 데이터를 사용하는 이유
  3. . map()에서의 KEY
  4. 주의사항
  5. .map() 에서의 key 값 지정  결론
'STUDY 📒/React' 카테고리의 다른 글
  • [React, vite] 이미지 넣는 방법들
  • querySelector, 구조에 종속적이지 않게 가져올 수 있는 방법
South Dev
South Dev
개발이 그대를 속일지라도 Get Shit Done.
South Dev
개발이 그대를 속일지라도
South Dev
전체
오늘
어제
  • 전체보기 (38)
    • 작업 🎢 (5)
      • 웹 프로젝트 (5)
      • 영상음악 (0)
      • 100억 이상의 정보 (0)
    • STUDY 📒 (17)
      • React (3)
      • Javascript (5)
      • CSS & SCSS & SASS (3)
      • Web Design (0)
      • git & github (4)
      • 정보처리기사 (0)
      • npm (2)
    • Book (13)
      • IT 5분 잡학사전 (13)
    • MUSIC 🎶 (1)
      • Bossa nova (1)
    • 기타 🎠 (1)
      • YOUTUBE (1)

블로그 메뉴

  • ⚪깃허브
  • ✏ 글 작성
  • ⚙ 관리자 페이지
  • 서치 콘솔
  • 방명록
  • 태그

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
South Dev
[ React / .map() ] 상수 데이터 / .map() 에서 key 값 지정
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.