KimMinJun
Coding Note
KimMinJun
전체 방문자
오늘
어제
  • 분류 전체보기 (486)
    • ALGORITHM (11)
      • 정렬 (6)
      • 최단경로 (1)
      • 자료구조 (1)
      • 슬라이딩 윈도우 (1)
      • etc (2)
    • Git (5)
    • Web (24)
      • Vanilla JS (13)
      • TS (2)
      • React (7)
      • ETC (1)
    • React 공식문서 (번역, 공부) (11)
      • Quick Start (2)
      • Installation (0)
      • Describing the UI (9)
      • Adding Interactivity (0)
      • Managing State (0)
      • Escape Hatches (0)
    • Next.js 공식문서 (번역, 공부) (3)
      • Getting Started (2)
      • Building Your Application (1)
    • PS (431)
      • 백준 (187)
      • Programmers (104)
      • CodeUp (21)
      • STL (3)
      • 제코베 JS 100제 (50)
      • SWEA (0)
      • LeetCode (65)
    • IT (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 관리

공지사항

인기 글

태그

  • 다이나믹 프로그래밍
  • Level1
  • 백준
  • programmers
  • Level 2
  • 문자열
  • recursion
  • string
  • js
  • LeetCode
  • C
  • Level 1
  • 정렬
  • 그래프
  • Level 0
  • C++
  • 수학
  • tree
  • codeup
  • 제코베 JS 100제

최근 댓글

최근 글

hELLO · Designed By 정상우.
KimMinJun

Coding Note

React 공식문서 (번역, 공부)/Describing the UI

Rendering Lists

2023. 5. 15. 03:25

JavaScript의 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다. filter() 혹은 map()을 많이 사용한다.

 

배열 데이터 렌더링

아래와 같은 목록이 있다고 해보자.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

 

 

위와 같은 리스트의 형식으로 우리는 데이터를 다르게 하거나, 원하는 값만 뽑아낸다거나 하고싶을 수 있다. 또는 모든 리스트에 대해 어떠한 작업을 추가로 해서 렌더링 시키고 싶을 수 있다. 그럴때 map() 메서드를 이용하는데 다음과 같은 과정을 거치면 된다.

 

1. 데이터를 배열로 이동:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

 

2. map()을 이용하여 새 배열을 만듦

const listItems = people.map(person => <li>{person}</li>);

 

3. listItems를 반환

return <ul>{listItems}</ul>;

 

 

결과는 다음과 같다.

 

하지만 콘솔에 각 자식 목록은 "key" 속성이 있어야 한다는 오류가 나온다. 이것을 고치는 방법은 뒤에서 알아보자.

 

 

key를 이용하여 순서대로 목록을 유지하기

key는 배열 항목이 정렬되어서 인덱스가 바뀌거나, 삽입되거나, 삭제되거나 할 때 매우 중요하다. 각 자식 요소가 다른 형제 요소와 다르다는것을 나타내기 위해서 key 속성을 사용해야 한다. 만약 리스트가 변할일이 없거나 할 때는 리스트의 인덱스를 key로 사용할 수 있다. 하지만 그렇지 않을 경우에는 보통 DB의 id값을 가져오던가, id를 데이터에 꼭 포함시켜서 key로 사용한다.

 

 

key는 어디서 얻어올까?

  • 데이터베이스의 데이터: DB의 고유한 키 / ID를 사용할 수 있다.
  • 로컬에서 생성된 데이터: 데이터가 로컬에서 생성되고 유지되는 경우에는 crypto.randomUUID() 또는 uuid 패키지를 사용한다.

 

 

key 규칙

  • key는 형제 간에 고유해야 한다. 하지만 다른 배열의 JSX 노드에 동일한 키를 사용해도 된다.
  • key는 변경되어서는 안된다.
저작자표시 (새창열림)

'React 공식문서 (번역, 공부) > Describing the UI' 카테고리의 다른 글

Keeping Components Pure  (0) 2023.05.15
Conditional Rendering  (0) 2023.05.14
Passing Props to a Component  (0) 2023.05.08
JavaScript in JSX with Curly Braces  (2) 2023.05.08
    'React 공식문서 (번역, 공부)/Describing the UI' 카테고리의 다른 글
    • Keeping Components Pure
    • Conditional Rendering
    • Passing Props to a Component
    • JavaScript in JSX with Curly Braces
    KimMinJun
    KimMinJun

    티스토리툴바