물론 리액트 애플리케이션을 만들 때
이 하나의 앱 컴포넌트에 한정 되지 않습니다
보통 개인의 컴포넌트를
몇십 개에서 몇백 개를
만들고 사용하게 됩니다
여기 보이는 기본 데모 앱을 예시로 보면
앱 컴포넌트를 보다 깔끔하게 만들기 위해 이 헤더와
관련 코드를 새로운 커스텀 컴포넌트에 삽입할 수 있습니다
또한 커스텀 컴포넌트를
만드는 방법도 배울 것입니다
그런 커스텀 컴포넌트를 구축하기 위해
아직까지는 App JSX 파일을 사용해도 됩니다
나중에는 다른 파일에 다른 컴포넌트를
넣을 것입니다
일단 시작하기 위해 새로운 자바스크립트 함수를
추가하여 새로운 컴포넌트를 만들어 보겠습니다
지금쯤 알고 있는 것처럼 리액트 컴포넌트는
단순히 자바스크립트 함수이기 때문입니다
이와 같이 앱 함수 위와 같은 위치에
새로운 함수를 추가할 수 있습니다
일반적인 자바스크립트 함수이므로
함수 키워드를 사용해
함수를 생성할 수 있고
이름을 자유롭게 부여할 수 있습니다
대문자로 시작해야 하는 것을 잊으면 안됩니다
예를 들어 헤더 마크업을 별도의 컴포넌트에
추가하는 것이 제 목표라면
헤더를 이름으로 설정할 수도 있습니다
이 경우에는 마지막 단계인데 다음 단계에
새로 생성된 헤더 함수에
값이 반환되어야 합니다
반환된 값은 이 컴포넌트를 통해
화면에 보여져야 하는 내용이어야 합니다
그러므로 이 경우, 헤더 마크업인 이 HTML 코드를
앱 컴포넌트에서 잘라
이 헤더 컴포넌트에 붙일 수 있습니다
여기 보이는 것과 같이
다중선 JSX 코드 조각을 반환할 시
자바스크립트 처음과 끝을 괄호로 묶어
이 코드가 함께 있다는 것을 표시해야 합니다
다행히도 VS 코드를 사용하면
직접 작업할 필요가 없습니다
문서 정렬 단축기를 누르면
괄호가 자동으로 추가됩니다
CodeSandbox에서도
단축기를 누르거나
문서정렬 명령을 실행하거나
파일은 저장하면 됩니다
이것으로 첫 번째 커스텀 컴포넌트를
완성했습니다
지금까지 정의는 했으나
아직 사용하는 단계는 아닙니다
일반적으로 자바스크립에서 함수를
이런 방식으로 실행할 수 있지만
리액트 컴포넌트를 사용하는 방식은 다릅니다
이와 같은 함수는 리액트 라이브러리가
내부에서 실행시켜
화면에 나와야 하는 것이 무엇인지 인지하므로
앞서 보여준 방식으로
함수를 실행하지 않습니다
리액트와 자바스크립트 코드의 HTML인
JSX의 강점은 JSX 코드 안에
일반 HTML 코드 같이
컴포넌트 함수를 사용할 수 있다는 점입니다
그러므로 헤더 컴포넌트의 내용을
앱의 일부로 출력하고 싶다면
앱 컴포넌트로 가서
지난번에 HTML 요소 같이 정의한 것과 똑같이
앱 컴포넌트 JSX 코드 안에
이 헤더 컴포넌트 함수를 사용할 수 있습니다
먼저 제목 설정을
대문자 H가 들어간 'Header'로
올바르게 하시고
시작과 마무리 태그를 넣거나
간단하게 이와 같이
자동 닫힘 태그를
작성할 수 있습니다
자동 닫힘 문법에서
염두해야 할 것은
이 문법을 사용한다면
끝에 이와 같이 슬래시 기호(/)가 있을 것입니다
이미지 태그를 사용할 때
내재된 이미지 요소에도
슬래시 기호가 있어야 합니다
이런 식으로 작성하는 것은 불가능합니다
다행히도 보이는 바와 같이
이런 식으로 작성한다면 오류가 발생합니다
그러니 커스텀 컴포넌트에도
슬래시 기호가 반드시 있어야 합니다
App JS 파일을 저장하고
미리보기 화면을 새로고치면
이 제목과 부제목 이미지가 있는
헤더가 다시 보입니다
이미 봤던 화면이기 때문에
사실 아주 대단한 변화는 아닙니다
하지만 우리의 첫 번째 커스컴 컴포넌트의
결과를 볼 수 있었습니다
리액트에서 컴포넌트를
자주 사용하기 때문에
아주 중요한 첫 걸음이었습니다
이제 여러분 본인의 컴포넌트를 만들 수 있고
보시는 것과 같이 어렵지 않다는 것을 알 수 있습니다
이제 앞으로 더 많은 기능을 추가하고
연관된 개념에 대해 배울 것입니다
지금까지 리액트 컴포넌트를
구축하는 방법이었습니다