이제 동적인 데이터를 출력하는
방법을 배웠으니 컴포넌트로 돌아가
이를 어떻게 사용할 수 있는지 살펴보겠습니다
컴포넌트의 주요 장점 중 하나는
재사용이 가능하다는 것이므로
예를 들어 이 헤더 컴포넌트에
원하는 만큼 자주 사용할 수 있습니다
물론 그렇게 하면 이 페이지에서
여러 개의 헤더를 볼 수 있습니다
물론 여기서 헤더 컴포넌트에
재사용이 가능하지만
굳이 그럴 필요는 없어 보입니다
흔하게 있는 일입니다
또한 이론적으로는 재사용이 가능하지만
실제로는 한 번만 사용할 수 있는
컴포넌트를 구축하는 경우도 많을 것입니다
그러나 여러 번 재사용해야 하는
컴포넌트가 있는 것도 매우 일반적입니다
예를 들어, 여기 'Core Concepts'(핵심 개념 아이템들은
하나의 단일 'Core Concepts' 컴포넌트를
구축하여 4번 재사용할 수 있으며
이 4가지 'Core Concepts'마다
4번 재사용할 수 있지만
사용할 때마다 다른 데이터와 함께 사용해야 합니다
매개 변수 개념 덕분에 일반적인
자바스크립트 함수를 한 번 정의하고
여러 번 사용할 수 있는 것과 같습니다
따라서 다른 데이터로 자바스크립트 기능을 구축하고
재사용 할 수 있듯이 입력 데이터가 다른
특정 리액트 컴포넌트를
구축하고 재사용할 수도 있습니다
그렇기 때문에 리액트는 속성(props)이라는 컴포넌트와
관련된 또 다른 중요한 개념을 제공합니다
이 props라는 개념은 데이터를
컴포넌트로 전달하고 그 데이터를
그 곳에 사용할 수 있다는 것입니다
이 작업물은 현재
이 app.jsx 파일에 있습니다
곧 변경될 예정이지만
'Core Concepts' 데이터를 출력하는 것이기 때문에
CoreConcept라고 부를 새로운 컴포넌트 함수를
추가할 수 있습니다
그리고 여기서 저는 src와 alt 태그가 있는
이미지를 포함한 목록 항목을 출력하려고 합니다
여기에 간략한 제목과 설명하는 단락이 있는
'h3' 태그가 있습니다
물론, 목표는 이 제목과 설명의
자리 표시뿐만 아니라
이 CoreConcept 컴포넌트가 사용될 때마다
달라지는 실제 데이터를 갖는 것입니다
이제 여기에 정의된 컴포넌트를 사용하여
앱 컴포넌트로 이동할 수 있습니다
여기 메인 영역에서 core-concept라는
id가 포함된 새로운 section을 추가할 것입니다
이 index.ccs 파일에는
core-concepts id 선택기가 있기 때문에
스타일 목적으로 추가하는 것입니다
따라서 저와 동일한 스타일에 맞출 수 있게
id를 제대로 맞추기 바랍니다
이제 h2 태그로 이동하여
여기에 'Core Concepts'라는 문구를 입력하고
그 아래에 ul(unordered list)을 추가합니다
이제 목표는 새로 추가한
CoreConcept 컴포넌트를
이 ul에 사용하는 것입니다
물론 목표는 여러 번 재사용하는 것이지만
사용할 때마나 다른 데이터를 전달하고자 합니다
props 개념 덕분에 아주 쉽게 할 수 있습니다
커스텀 컴포넌트에
커스텀 속성을 추가할 수 있으며
여러분의 컴포넌트이기 때문에
해당 컴포넌트에 설정하려는 속성도
전적으로 여러분에 달려있어
속성 이름 또한 여러분이 정할 수 있습니다
여기 title 속성을 추가하는 것으로 시작하여
CoreConcept의 첫 번째 사용을 위해
여기서 Components로 설정하겠습니다
그리고 description 속성을 추가하겠습니다
사실 리액트에서는 이걸 props라고 칭하는데
컴포넌트를 설정하는 개념을
'props'라고 부르기 때문입니다
여기 있는 description prop은
핵심 UI 빌딩블록이라고 말할 수 있습니다
마지막으로 여기에 이미지를 추가할 수 있습니다
지난 강의에서 보여드렸던 것처럼
이미지를 불러오길 원하기 때문에
동적인 값으로 설정하고자 합니다
이제 ./assets/component.png에서
컴포넌트 이미지를 불러올 수 있습니다
이를 통해 컴포넌트 이미지를 사용할 수 있습니다
마지막에 이 변수를
이렇게 작성된 이미지 속성
값으로 사용할 수 있습니다
정말 모든 종류의 값을
props의 값으로
전달할 수 있어 매우 중요합니다
이처럼 문자열(string)을 전달할 수도 있고
숫자도 전달할 수 있습니다
이와 같이 2가 필요하다면 2를 입력하고
객체(object)나 배열(array)로 전달할 수도 있습니다
실제로 필요한 모든 것이 전달 가능한 것입니다
여기선 이 데이터를 전달합니다
이 데이터가 컴포넌트 함수로 전달되면
이제 데이터를 받아 사용하기 시작하면 됩니다
일반적인 자바스크립트 함수에는
입력 값을 받아들이고 사용하기 위해
한 개 이상의 매개변수를 추가하면 됩니다
리액트 컴포넌트 함수를 사용할 때도
거의 비슷하지만
일반적으로 props라고 불리는
하나의 매개변수만 사용할 수 있습니다
여러분의 컴포넌트 함수이기 때문에
이름은 자유롭게 설정해도 됩니다
일반적으로 리액트에서 props라고 칭하기 때문에
이 매개변수에 대해 일반적으로 선택되는 이름입니다
이제 이 기능을 리액트가 실행하기 때문에
props 매개변수는 리액트에 의해 설정됩니다
이 컴포넌트 함수를 직접 코드에
호출하는 것이 아니라는 것을 기억해야 합니다
대신 HTML 요소로 사용하는 것이며
실제로는 리액트가 실제 함수를 부르는 것입니다
따라서 리액트는 이 props 매개변수에 대한
값을 전달하고
리액트에 의해 매개변수를 위해
함수에 전달되는 값은 객체가 되어
모든 키 값의 쌍들을 보유하는 객체가 됩니다
따라서 모든 커스텀 특성은 키(key)로, 속성의
값은 값으로
그룹화 됩니다
따라서 키값 쌍들을 모두 가진 하나의 객체를
이 props 매개변수를 통해 얻는 것입니다
따라서 컴포넌트 함수에서
props.image에 접근한다면
이 이미지 키에 설정된 값을 얻을 수 있습니다
여기서 img와 같은
다른 키를 사용했다면
위에도 같은 키를 사용해야 합니다
따라서 밑에서 설정한 키는
props 값을 사용하고 싶을 때 이 위에 있는
컴포넌트에서도 사용되어야 하는 키입니다
다시 약어인 img 말고
image로 돌아가겠습니다
이제 이 제목을 alt값으로 사용하기 위해
alt에 'props.title'과 같은
값을 지정할 수 있습니다
실제로 보일 제목을 위해
여기와 props.description에
props.title을 사용할 수 있습니다
이것이 여기서 설정된 값을 사용할 수 있는 방법이었습니다
모든 것을 저장하면
이 첫 번째 요소와 내용이
화면에 표시됩니다
이제 동일한 컴포넌트를 다른 데이터가
있는 다른 위치에서 사용할 수 있습니다
예를 들어 두 번째 'Core Concepts' 아이템의
title을 Props로 설정할 수 있고
이로써 이 위치에 'Props'를 볼 수 있습니다
이제 여기에 이미지, 설명 등
다른 항목을 설정할 수 있습니다
지금까지 Props에 대한 개념이었습니다
다음 강의에는 이 개념을 계속 배워
나머지 항목을 마무리 지을 것입니다