이제 나머지 항목을 완성하기 위해
첨부된 새 파일을 찾아
data.js 파일을 다운 받아야 합니다
App.jsx 파일 옆에 추가하거나
새 파일을 생성해 data.js 파일에
있는 내용을 붙이면 됩니다
이 파일에 여러 개의 객체가 있는
배열을 찾을 수 있으며 이 모든 객체는
여기에 출력 되는 하나의 CoreConcept입니다
그래서 모든 객체에
이미지, 제목과 설명이 있습니다
이미지는 assets 폴더에서
불러옵니다
App.jsx에 파일이 추가되면
CORE_CONCEPTS를 import할 수 있어야 합니다
이와 같이 data.js에서
CORE_CONCEPTS에 중괄호로 감싸
불러와야 합니다
data.js의 CORE_CONCEPTS는 이름이 부여된 export이므로
자바스크립트의 기본 export와 다르게
export하는 것의 이름을
중괄호로 감싸
내보내야 합니다
이 곳에 import하는 것과 마찬가지로
제목 등을 CORE_CONCEPTS로
동적으로 설정할 수 있습니다
이 CORE_CONCEPTS 배열의
첫 번째 항목인
이 객체에 접근하여
제목, 설명 등에 접근할 수 있습니다
그러면 여기서 title을
'CORE_CONCEPTS[0].title'로 설정할 수 있습니다
여기 description에도 동일하게 해줍니다
이제 밑에 있는 이미지를
'.image'라고 설정하면
이제 별개인 componentsImg를
제거할 수 있습니다
이로써 CORE_CONCEPTS를 사용할 수 있습니다
이제부터 세 번 반복할 수 있고
인덱스 0을 인덱스 1로
그리고 인덱스 2
인덱스 3으로 바꿀 수 있습니다
이를 통해 동일한 컴포넌트를
접근하는 항목의 인덱스에 따라
입력 데이터가 달라져
동적인 설정이 되는 것입니다
이제 저장하면
화면에 CoreConcept들이 보일 것입니다
여기서 좋은 점은
한 개의 컴포넌트로 이와 같이
다양한 항목을 볼 수 있다는 점입니다
속성 덕분에 이 컴포넌트를 재사용할 수 있는 것입니다
그러나 여기 밑을 본다면
코드가 제대로 작동하기 위해 상당히 많은 양의
코드를 작성해야 한다는 것을 볼 수 있습니다
아주 최악은 아니지만 최적의 상황도 아닙니다
다행히 단축키가 있습니다
설정하려는 데이터가 있는
객체의 props 이름과
속성 이름이 비슷한 경우
이와 같이 데이터를
설정할 수 있으며
이 Prop들을 모두 없애고
컴포넌트의 시작과 끝에
직접 중괄호를 추가할 수도 있습니다
속성값으로서가 아니고
이렇게 되는 것입니다
컴포넌트 태그에 삽입하고
자바스크립트에 내장된
스프레드 연산자를 사용하여
객체의 키값의 쌍들을 뽑아낼 수 있습니다
이 경우, 첫 번째 객체는
이 CORE_CONCEPTS 배열입니다
이 문법을 사용해
객체의 키값 쌍은
이 컴포넌트의 props에
키값으로 추가됩니다
그래서 여기 이 코드가
이 코드와 같은 결과를 도출하지만
훨씬 짧습니다
물론 여기서는 인덱스 1을 사용해야 합니다
이를 통해 모든 컴포넌트를
더 짧은 방식으로 사용할 수 있습니다
긴 방식은 여러분이 볼 수 있도록
보여드리는 것입니다
이 긴 방식도 물론
사용해도 되지만
이 짧은 방식을
선택하는 것을 추천합니다
짧은 방식에 대해 또 덧붙히자면
컴포넌트 함수 내에도
짧은 방식이 있습니다
여기 'props.title,' 'props.description' 등에서
다양한 속성에 접근할 수 있습니다
이 방법 또한 훌륭하고 정상적으로 작동합니다
보이는 것과 같이 저장 후
전과 같은 결과를 볼 수 있습니다
매개변수 목록에서
다른 자바스크립트 기능을 사용할 수도 있습니다
이렇게 중괄호를 추가하여 객체
구조 분해를 사용할 수 있습니다
이 개폐 중괄호는
이 아래에 있는 개폐 중괄호와
아무런 관련이 없습니다
전혀 연관성이 없습니다
이 매개변수 목록에서 사용될 때
이 개폐 중괄호는
첫 번째 매개변수의 함수를
구조 분해할 때 사용됩니다
이 경우에는 props 매개변수를 의미합니다
자바스크립트에서 구조분해는
단순히, 들어오는 객체의
속성들을 이름별로 목표로 한다는 것을 의미합니다
그래서 여기 props로 설정하는 것과
동일한 속성을 사용해야 합니다
title, description, image와 마찬가지죠
따라서 여기 객체의 중괄호 사이에
'image,' 'title'과 'description'이라고
정확히 동일한 단어를 사용해야 합니다
자바스크립트는
이 함수에서 이 세 가지 속성을
독립된 변수로 제공합니다
따라서 이제는 image를 가리키면
image가 출력되고
title을 사용하면 title이 출력 되고
description을 사용하면 description이 출력됩니다
이로 인해 코드를 줄일 수 있습니다
이 객체 구조 분해 문법을
길거나 짧은 props 버전에서 둘 다 사용할 수 있습니다
두 가지 다 상관없고
여러분에게 달려있습니다
이제 저장하면
앞서 본 것과 동일한 결과물이 보이지만
컴포넌트의 코드가 줄었습니다