이제
이 첫 번째 데모 애플리케이션이 거의 완료되었습니다
우리가 갖고 싶은 모든 기능이 있지만
여전히 개선할 수 있는 것이 있습니다
구체적으로 개선할 수 있는 부분이 바로 이 부분입니다
비주얼적인 개선이 아닌 내부의 코드를 말하는 것입니다
지금 여기 앱 컴포넌트에는
4개의 CoreConcept 아이템이
이와 같이 화면에 보입니다
여기서 이 접근법의 문제점은
이 CoreConcept에 4개의 데이터 항목이 있기 때문에
이 CoreConcept 컴포넌트를
코드에서 수동으로 4번 반복한다는 것입니다
그러나 주석 처리를 하면서
항목 중 하나를 제거한다면
앱이 고장날 것이며
망가진 요소는 여기에서 볼 수 있습니다
이렇게 보이는 것은 아직도 4개의 요소를 출력하려고 하기 때문입니다
따라서 불필요한 타이핑이 많은
코드의 반복이라는 점을 제외하고도
이 접근 방식은 데이터 소스가 변경되면
앱이 망가질 수 있다는 단점이 있습니다
예를 들어 한 요소가 제거되면
CoreConcept 배열에 있는 숫자에 맞춰
CoreConcept 컴포넌트 수가
동적으로 변할 수 있다면
더 좋을 것입니다
즉 자동으로 배열에 있는 항목에 맞춰
컴포넌트가 출력되는 것입니다
다행히도 충분히 할 수 있는 내용입니다
이제 목록을 동적으로
출력하는 방법을 이해하기 위해선
JSX로 데이터 배열을
출력할 수 있다는 것을 이해하는 것이 중요합니다
동적으로 출력할 수도 있고
Hello와 World 같은 문자열 배열일 수도 있습니다
여기서 저장하면 텍스트가 이렇게 보이고
JSX 요소 배열일 수도 있는데
Hello를 한 p태그에 그리고 World를 다른 p태그에 넣어
이렇게 출력이 되는 것이 보입니다
즉, JSX는 JSX 코드 배열과 같이
렌더링 가능한 데이터 배열을 처리할 수 있는 능력이 있습니다
여기에 자바스크립트 객체 배열이 있는데
JSX로 이를 출력할 수 없습니다
이 이미지 데이터가
이미지 요소에 감싸져야 한다는 것은
더더욱이 모릅니다
그러나 JSX가
JSX 요소 배열을 출력할 수 있으므로
이 객체 배열을
JSX 요소 배열로 변환해 볼 수 있습니다
여기 정리되지 않은 목록에
무언가를 동적으로 출력할 수 있습니다
여기서 출력하고자 하는 것은
JSX 요소 배열로 변환된 CoreConcept 배열입니다
자바스크립트 배열은
내장된 매핑 방법을 통해 변환될 수 있으며
현존하는 배열에 기반하여 새로운 배열을 제공합니다
.map을 화살표 함수로
같은 자바스크립트 함수를 넣습니다
그 함수는 자동적으로
배열 항목을 입력값으로 받습니다
저는 여기에 conceptItem이라고
이름을 정하겠습니다
이제 이 함수는 배열의 모든 항목을 위해
자바스크립트에서 실행됩니다
이 경우에는 세 번입니다
마지막 요소를 주석 처리하여
이 배열에는 3개의 요소가 있기 때문입니다
그리고 매번 실행할 때마다
이 매개변수를 위한 값으로 이 항목을 받게 됩니다
이 항목을 변화하기 위해 원하는 코드를
화살표 함수 안에서 반환할 수도 있습니다
그래서 이 경우에는 JSX 코드로 사용되는
이 CoreConcept 컴포넌트로 변환하고자 합니다
물론 이제 우리는 여기서 특정 CoreConcept 인덱스에
더 이상 접근하지 않습니다
대신 이 conceptItem은
이미 이 CoreConcept 배열의 아이템 중 하나이기 때문에
이 개념 항목을 사용합니다
따라서 이전에 인덱스별로
수동으로 접근했던 것을 이 .map 메소드을 통해
단계별로 자동으로 접근할 수 있습니다
언급한 바와 같이 이 함수는
배열의 모든 항목에 대해 한 번 실행되므로
이 목록을 동적으로 생성하는
빠르고 쉬운 방법입니다
따라서 이제 우리는 여기서 이 모든 코드를 제거하고
이 .map 메소드를 사용하여 데이터 목록을 출력할 수 있습니다
이는 또 다른 매우 유용한 기능이자 패턴입니다
이 과정을 통해 알게 되겠지만
리액트 앱에서는 데이터 목록을
출력하는 경우가 많기 때문입니다
그리고 거의 항상 .map 메소드를 사용하여
데이터를 JSX 코드로 변환할 것입니다
이제 저장하면
동적으로 생성된 세 가지 항목이 보입니다
이제 data.js로 돌아가
마지막 항목을 다시 넣으면
네 개의 항목이 보입니다
이제 목록이 동적으로 생성되므로
앱 컨포넌트를 바꾸지 않아도 반영됩니다
추가적으로 개발자 도구를 열면
경고가 보입니다
목록에 있는 각 자녀가 고유의 키 속성을
가져야 한다는 경고인데 상급 개념이므로
추후 수업에서 다시 설명하겠습니다
일단 경고를 제거하기 위해서
컴포넌트 안에서
이 속성을 사용하지 않지만
컴포넌트에 키 속성을 추가하는 것입니다
여기서 키 속성을 사용하려는 것은 아니지만
리액트에서 사용할 것이므로 추가해야 합니다
리액트가 이해하고 사용하는 특별한 속성으로
이 키 속성은 아무 컴포넌트에 추가할 수 있습니다
내장 요소들에도 추가할 수 있고
여기처럼 커스텀 컴포넌트에 추가할 수 있습니다
이 키 속성의 값은 목록 항목을
식별할 수 있는 고유한 값이어야 합니다
시스템 내부에서 이 목록을 효율적으로 렌더링하고
업데이트하기 위해 리액트가 사용합니다
따라서 여기 있는 모든 항목에는 다른 제목이 있기 때문에
title을 고유한 값으로 사용할 수 있습니다
이 고유한 값이
아이템들을 구별하는 데 사용할 수 있는 값이라는 것
바로 이 키 속성의 전부입니다
그래서 여기에 그 특별한 prop을 추가하면 목록은 여전히
예전처럼 보이지만 경고가 사라졌습니다
지금까지 목록을
동적으로 출력할 수 있는 방법이었습니다