9. 컴포넌트 반복

웹 어플리케이션을 만들다 보면 <li> ... </li> 같이 반복되는 코드를 작성할 때가 있다.

코드가 좀 더 복잡해지면 코드의 양은 더욱 늘어나고 불필요한 파일 용량도 증가하면서 낭비가 될 것이다.

리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법은 아래와 같다.

 

9.1. 자바스크립트 배열 객체의 내장 함수인 map() 을 사용

 

문법 : arr.map(callback, [thisArg])

 

파라미터

 

callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지

• - currentValue : 현재 처리하고 있는 요소
• - index : 현재 처리하고 있는 요소의 index 값
• - array : 현재 처리하고 있는 원본 배열

thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

예제 - 아래와 같이 Sample.js 파일을 만들고 컴포넌트를 불러와 렌더링 해본다

결과 확인

크롬 개발자 도구를 확인해보면 "key" prop 가 없다는 경고 메시지를 표시했다.

 

9.2. key

- 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.

 

- key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.

- key 값은 언제나 유일해야 한다. 따라서 데이터가 가진 고윳값을 key 값으로 설정해야 한다.

아래와 같이 key 를 지정하면 개발자 도구에서 보인 에러가 사라진 것을 볼 수 있다.