첫 번째 컴포넌트

컴포넌트는 React의 핵심 개념 중 하나입니다. 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기반이므로, React 여정을 시작하기에 완벽한 출발점입니다!

컴포넌트: UI 구성 요소

웹에서는 HTML이 <h1> 및 <li>와 같은 내장 태그 세트를 사용하여 풍부한 구조화된 문서를 만들 수 있게 합니다:

이 마크업은 이 글 <article>, 그 제목<h1>, 그리고 (약식) 목차를 정렬된 목록<ol>으로 표현합니다. 이러한 마크업과 스타일을 위한 CSS, 상호작용을 위한 JavaScript가 결합되어 웹에서 보는 모든 사이드바, 아바타, 모달, 드롭다운 등 모든 UI 조각의 기반이 됩니다.

React를 사용하면 마크업, CSS, JavaScript를 커스텀 "컴포넌트"로 결합할 수 있습니다. 이는앱을 위한 재사용 가능한 UI 요소입니다.위에서 본 목차 코드는 모든 페이지에 렌더링할 수 있는<TableOfContents /> 컴포넌트로 변환될 수 있습니다. 내부적으로는 여전히 <article>,<h1>등과 같은 HTML 태그를 사용합니다.

HTML 태그와 마찬가지로 컴포넌트를 구성하고 순서를 정하며 중첩하여 전체 페이지를 설계할 수 있습니다. 예를 들어, 지금 읽고 있는 이 문서 페이지는 React 컴포넌트로 만들어져 있습니다:

프로젝트가 성장함에 따라, 많은 디자인이 이미 작성한 컴포넌트를 재사용하여 구성될 수 있음을 알게 되어 개발 속도를 높일 수 있습니다. 위의 목차는<TableOfContents />를 사용하여 어떤 화면에든 추가할 수 있습니다! 심지어 Chakra UI 및 Material UI와 같이 React 오픈소스 커뮤니티가 공유하는 수천 개의 컴포넌트로 프로젝트를 빠르게 시작할 수도 있습니다.

컴포넌트 정의하기

전통적으로 웹 페이지를 만들 때 웹 개발자는 콘텐츠에 마크업을 추가한 다음 약간의 JavaScript를 뿌려 상호작용을 추가했습니다. 이 방식은 웹에서 상호작용이 부가적인 기능일 때는 훌륭하게 작동했습니다. 그러나 현재는 많은 사이트와 모든 앱에서 상호작용이 필수적입니다. React는 동일한 기술을 사용하면서도 상호작용을 최우선으로 합니다:React 컴포넌트는 마크업을 뿌릴 수 있는 JavaScript 함수입니다.다음은 그 모습입니다 (아래 예제를 편집할 수 있습니다):

컴포넌트를 만드는 방법은 다음과 같습니다:

1단계: 컴포넌트 내보내기

접두사export default는 표준 JavaScript 구문입니다 (React에만 국한되지 않음). 이를 통해 파일의 주요 함수를 표시하여 나중에 다른 파일에서 가져올 수 있습니다. (가져오기에 대한 자세한 내용은컴포넌트 가져오기 및 내보내기)

2단계: 함수 정의하기

함수function Profile() { }를 사용하여 이름이 Profile인 JavaScript 함수를 정의합니다.

3단계: 마크업 추가하기

컴포넌트는 <img />태그와src 및 alt속성을 반환합니다.<img />는 HTML처럼 작성되었지만 실제로는 내부적으로 JavaScript입니다! 이 구문은JSX라고 하며, JavaScript 내부에 마크업을 포함할 수 있게 합니다.

반환문은 이 컴포넌트처럼 한 줄에 모두 작성할 수 있습니다:

하지만 마크업이 return키워드와 같은 줄에 있지 않다면, 괄호 쌍으로 감싸야 합니다:

컴포넌트 사용하기

이제 Profile컴포넌트를 정의했으니, 다른 컴포넌트 안에 중첩할 수 있습니다. 예를 들어, 여러 개의Profile컴포넌트를 사용하는Gallery컴포넌트를 내보낼 수 있습니다:

브라우저가 보는 것

대소문자 차이를 확인하세요:

• <section>는 소문자이므로 React는 HTML 태그를 가리킨다는 것을 압니다.
• <Profile />는 대문자 P로 시작하므로 React는 Profile라는 컴포넌트를 사용하고자 한다는 것을 압니다.

그리고Profile은 더 많은 HTML을 포함합니다:<img />. 결국 브라우저가 보는 것은 다음과 같습니다:

컴포넌트 중첩 및 구성

컴포넌트는 일반 JavaScript 함수이므로, 여러 컴포넌트를 같은 파일에 보관할 수 있습니다. 이는 컴포넌트가 상대적으로 작거나 서로 밀접하게 관련되어 있을 때 편리합니다. 파일이 복잡해지면 언제든지Profile을 별도의 파일로 이동할 수 있습니다. 이에 대해서는 곧가져오기 페이지에서 배우게 될 것입니다.

Profile 컴포넌트가 Gallery안에서 렌더링되기 때문에—심지어 여러 번!—Gallery는 부모 컴포넌트이고, 각Profile은 “자식”으로 렌더링된다고 말할 수 있습니다. 이것이 React의 마법의 일부입니다: 컴포넌트를 한 번 정의하고, 원하는 만큼 많은 곳에서 여러 번 사용할 수 있습니다.

요약

방금 React의 첫 맛을 보셨습니다! 몇 가지 핵심 사항을 요약해 보겠습니다.

• React를 사용하면 컴포넌트, 즉 앱을 위한재사용 가능한 UI 요소를 생성할 수 있습니다.
• React 앱에서 모든 UI 조각은 컴포넌트입니다.
• React 컴포넌트는 일반 JavaScript 함수이지만 다음과 같은 점이 다릅니다:
  1. 이름은 항상 대문자로 시작합니다.
  2. JSX 마크업을 반환합니다.