UI 묘사 : 당신의 첫번째 컴포넌트
React는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이들을 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트부터 휴대폰 앱까지 화면의 모든 것을 컴포넌트로 분해할 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 사용자 정의하고, 조건부로 표시하는 방법을 배웁니다.
이 장에서는
- 첫 번째 React 컴포넌트를 작성하는 방법
- 멀티 컴포넌트 파일을 생성하는 시기와 방법
- JSX로 JavaScript에 마크업을 추가하는 방법
- JSX와 함께 중괄호를 사용해 컴포넌트에서 JavaScript 기능에 접근하는 방법
- props로 컴포넌트를 구성하는 방법
- 컴포넌트를 조건부로 렌더링하는 방법
- 한 번에 여러 컴포넌트를 렌더링하는 방법
- 컴포넌트를 순수하게 유지하여 혼란스러운 버그를 피하는 방법
당신의 첫 번째 컴포넌트
React 애플리케이션은 컴포넌트라고 하는 분리된 UI 조각으로 구축됩니다. React 컴포넌트는 마크업으로 뿌릴 수 있는 자바스크립트 함수입니다. 컴포넌트는 버튼처럼 작을 수도 있고 전체 페이지처럼 클 수도 있습니다. 다음은 세 개의 프로필 컴포넌트를 렌더링하는 갤러리 컴포넌트입니다:
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
컴포넌트는 React의 핵심 개념 중 하나입니다. 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기반이 되기 때문에 React 여정을 시작하기에 완벽한 곳입니다!
학습 내용
- 컴포넌트란 무엇인가요?
- React 애플리케이션에서 컴포넌트가 하는 역할
- 첫 번째 React 컴포넌트를 작성하는 방법
컴포넌트: 블록들로 UI 그리기
웹에서는 HTML을 통해 <h1>, <li>와 같은 기본 제공 태그 세트를 사용하여 풍부한 구조의 문서를 만들 수 있습니다.
<article>
<h1>My First Component</h1>
<ol>
<li>Components: UI Building Blocks</li>
<li>Defining a Component</li>
<li>Using a Component</li>
</ol>
</article>
이 마크업은 글 내용을 <article>로, 제목을 <h1>로, (축약된) 목차를 정렬된 목록 <ol>로 나타냅니다. 이와 같은 마크업은 스타일을 위한 CSS와, 상호작용을 위한 JavaScript를 결합하여 웹에서 볼 수 있는 모든 사이드바, 아바타, 모달, 드롭다운 등 모든 UI의 기반이 됩니다.
React를 사용하면 마크업, CSS, 자바스크립트를 앱의 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"로 결합할 수 있습니다. 위에서 본 목차 코드는 모든 페이지에 렌더링할 수 있는 <TableOfContents /> 컴포넌트로 바뀔 수 있습니다. 내부적으로는 여전히 <article>, <h1> 등과 같은 동일한 HTML 태그를 사용합니다.
HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정, 중첩하여 전체 페이지를 디자인할 수 있습니다. 예를 들어, 지금 읽고 있는 문서 페이지는 React 컴포넌트로 구성되어 있습니다:
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Docs</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
프로젝트가 성장함에 따라 이미 작성한 컴포넌트를 재사용하여 많은 디자인을 구성할 수 있으므로 개발 속도가 빨라집니다. 위의 목차는 <TableOfContents />를 사용하여 어떤한 화면에서도 추가할 수 있습니다! Chakra UI, 머티리얼 UI와 같이 React 오픈소스 커뮤니티에서 공유되는 수천 개의 컴포넌트로 프로젝트를 빠르게 시작할 수도 있습니다.
컴포넌트 정의하기
기존에는 웹 페이지를 만들 때 웹 개발자가 콘텐츠를 마크업한 다음 자바스크립트를 뿌려서 상호작용을 추가했습니다. 이는 웹에서 상호 작용이 중요했을 때 매우 효과적이었습니다. 이제는 많은 사이트와 모든 앱에서 상호작용을 기대합니다. React는 동일한 기술을 사용하면서도 상호작용을 우선시합니다. React 컴포넌트는 마크업으로 뿌릴 수 있는 자바스크립트 함수입니다. 그 모습은 다음과 같습니다.
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
컴포넌트를 빌드하는 방법은 다음과 같습니다:
1단계: 컴포넌트 내보내기
export default 접두사는 표준 자바스크립트 구문입니다(React에만 국한되지 않음). 이 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있도록 파일에 주요 함수를 표시할 수 있습니다. (컴포넌트 import 및 export에서 export에 대해 자세히 알아보세요!)
2단계: 함수 정의
function Profile() { }을 사용하면 Profile이라는 이름의 JavaScript 함수를 정의할 수 있습니다.
함정
리액트 컴포넌트는 일반 자바스크립트 함수이지만 이름이 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다!
3단계: 마크업 추가.
컴포넌트는 alt 어트리뷰트를 포함한 <img /> 태그를 리턴합니다. <img />는 HTML처럼 작성되었지만 실제로는 자바스크립트입니다.
이 구문을 JSX라고 하며, 자바스크립트 안에 마크업을 삽입할 수 있습니다.
return문은 이 컴포넌트에서와 같이 한 줄에 모두 작성할 수 있습니다.
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
그러나 마크업이 모두 return 키워드와 같은 줄에 있지 않은 경우에는 다음과 같이 괄호로 묶어야 합니다:
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
함정
괄호가 없으면 반환 뒤 줄에 있는 모든 코드가 무시됩니다!
컴포넌트 사용하기
이제 프로필 컴포넌트를 정의했으므로 다른 컴포넌트 안에 중첩할 수 있습니다. 예를 들어 여러 프로필 컴포넌트를 사용하는 갤러리 컴포넌트를 내보낼 수 있습니다:
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}브라우저에 표시되는 내용.
대소문자의 차이에 주목하세요. <section>은 소문자이므로 React는 HTML 태그를 참조한다는 것을 알 수 있습니다.
<Profile />은 대문자 P로 시작하므로 React는 Profile이라는 컴포넌트를 사용하려는 것을 알 수 있습니다. 그리고 Profile에는 더 많은 HTML <img />가 포함되어 있습니다. 결국 브라우저에 표시되는 것은 다음과 같습니다.
<section>
<h1>Amazing scientists</h1>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>
컴포넌트 중첩 및 구성
컴포넌트는 일반 자바스크립트 함수이므로 같은 파일에 여러 개의 컴포넌트를 가질 수 있습니다. 컴포넌트가 상대적으로 작거나 서로 밀접하게 관련되어 있을 때 편리합니다. 이 파일이 혼잡해지면 언제든지 프로필을 별도의 파일로 옮길 수 있습니다. import 대한 페이지에서 곧 이 방법을 배울 수 있습니다.
프로필 컴포넌트는 갤러리 안에서 렌더링되기 때문에(심지어 여러 번 렌더링되기도 합니다!) 갤러리가 부모 컴포넌트이고 각 프로필을 "자식"으로 렌더링한다고 말할 수 있습니다. 컴포넌트를 한 번 정의한 다음 원하는 곳에 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 마법입니다.
함정
컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안 됩니다:
export default function Gallery() {
// 🔴 Never define a component inside another component!
function Profile() {
// ...
}
// ...
}
위의 코드조각은 매우 느리고 버그를 유발합니다. 대신 최상위 수준에서 모든 컴포넌트를 정의하세요:
export default function Gallery() {
// ...
}
// ✅ Declare components at the top level
function Profile() {
// ...
}
자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우, 정의를 중첩하는 대신 props로 전달하세요.
Deep Dive - 모든 구성 요소를 자세히 살펴보기
React 애플리케이션은 "루트" 컴포넌트에서 시작됩니다. 일반적으로 새 프로젝트를 시작할 때 자동으로 생성됩니다. 예를 들어 CodeSandbox 또는 Create React App을 사용하는 경우, 루트 컴포넌트는 src/App.js에 정의됩니다. 프레임워크 Next.js를 사용하는 경우, 루트 컴포넌트는 pages/index.js에 정의됩니다. 이 예제에서는 루트 컴포넌트를 내보냈습니다.
대부분의 React 앱은 컴포넌트를 끝까지 사용합니다. 즉, 버튼과 같이 재사용 가능한 부분뿐만 아니라 사이드바, 목록, 궁극적으로는 전체 페이지와 같은 더 큰 부분에도 컴포넌트를 사용하게 됩니다! 컴포넌트는 일부가 한 번만 사용되더라도 UI 코드와 마크업을 정리하는 편리한 방법입니다.
Next.js와 같은 프레임워크는 이를 한 단계 더 발전시킵니다. 빈 HTML 파일을 사용하고 React가 자바스크립트로 페이지를 "대신" 관리하도록 하는 대신, React 컴포넌트에서 HTML을 자동으로 생성합니다. 이를 통해 자바스크립트 코드가 로드되기 전에 앱에서 일부 콘텐츠를 표시할 수 있습니다.
그럼에도 많은 웹사이트는 "약간의 상호작용"을 추가하는 데만 React를 사용합니다. 이러한 웹사이트에는 전체 페이지에 하나의 컴포넌트가 아닌 여러 개의 루트 컴포넌트가 있습니다. 필요한 만큼 React를 많이 또는 적게 사용할 수 있습니다.
요약
이제 막 React를 처음 사용해 보셨습니다! 몇 가지 핵심 사항을 요약해 보겠습니다.
- React를 사용하면 앱에 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있습니다.
- React 앱에서 모든 UI는 컴포넌트입니다.
- 리액트 컴포넌트는 일반적인 자바스크립트 함수입니다:
몇 가지 도전 과제를 시도해 보세요.
1. 컴포넌트 내보내기
2. 반환문 수정하기
3. 실수 발견
4. 나만의 컴포넌트 만들기
발표요약)
컴포넌트란? UI 조각이다.
1. 컴포넌트도 함수다.
2. 컴포넌트들의 조합으로 화면이 완성된다.
3. 컴포넌트는 중첩으로 정의하지 말것.
(이 중첩이 컴포넌트 안에 컴포넌트가 있는것을 의미하지는 않고, 컴포넌트 정의 안에 컴포넌트의 또다른 정의가 있는것을 말함.)