React 애플리케이션은 Component라고 불리는 독립적인 UI 조각으로 구축됩니다. React Component는 마크업을 뿌릴 수 있는 JavaScript 함수입니다. 버튼만큼 작을 수도 있고 전체 페이지만큼 클수도 있습니다.
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>
);
}
Components: UI building blocks
웹에서 HTML을 사용하면 다음과 같은 내장된 태그 셋을 사용하여 풍부하고 구조화된 문서를 만들 수 있습니다.
<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>React를 사용하면 마크업, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 컴포넌트로 결합할 수 있습니다. 위의 목차 코드는 <TableOfContents /> 모든 페이지에서 렌더링할 수 있는 컴포넌트로 바꿀 수 있습니다.
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Docs</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
기존에 작성된 컴포넌트를 재사용하여 많은 디자인을 구성하고 개발 속도를 높일 수 있습니다. Chakra UI 및 Material UI와 같은 React 오픈 소스 커뮤니티에서 공유하는 수천 개의 컴포넌트를 사용하여 프로젝트를 시작할 수 있습니다.
Defining a component
기존에는 웹 페이지를 만들 때 웹 개발자는 콘텐츠를 표시한 다음 일부 JavaScript를 뿌려 상호 작용을 추가했습니다. React는 동일한 기술을 사용하면서도 상호작용을 최우선으로 생각합니다. React 컴포넌트는 마크업을 뿌릴 수 있는 JavaScript 함수입니다.
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
Step 1: Export the component
export default 는 표준 JavaScript 구문입니다. 이를 통해 나중에 다른 파일에서 Import가 가능하도록 파일의 주요 함수를 표시할 수 있습니다.
Step 2: Define the function
function Profile () {} 와 같은 형식으로 JavaScript 함수를 정의합니다.
🚨 React 컴포넌트는 표준 JavaScript 함수이지만 첫번째 문자를 대문자로 작성하지 않으면 작동하지 않습니다.
Step 3: Add markup
컴포넌트 src 와 alt 속성이 포함된 <img /> 태그를 리턴합니다. <img /> 는 HTML과 같이 작성되었지만 실제로 내부적으로는 JavaScript입니다. 이 구문을 JSX라고 하며 이를 사용하여 JavaScript 내에 마크업을 삽입할 수 있습니다.
리턴문은 다음 컴포넌트와 같이 한 줄에 모두 작성할 수 있습니다.
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;그러나 마크업이 모두 키워드와 같은 줄에 있지 않으면 리턴 마크업을 괄호로 묶어야 합니다.
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);Using a component
Profile 컴포넌트를 정의하고 이를 다른 컴포넌트 내에 중첩할 수 있습니다. 예를 들어, 다수의 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 export할 수 있습니다.
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>
);
}
What the browser sees
대소문자 차이가 존재합니다.
<section> 는 소문자이므로 React는 HTML 태그를 참조한다는 것을 알고 있습니다.
<Profile /> 는 대문자로 시작하므로 컴포넌트임을 알고 있습니다.
최종적으로 브라우저에는 다음과 같은 내용이 표시됩니다.
<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>Nesting and organizing components
컴포넌트는 일반 JavaScript 함수이므로 동일한 파일에 여러 컴포넌트를 유지할 수 있습니다. 이는 컴포넌트가 상대적으로 작거나 서로 밀접한 관련이 있는 경우 편리합니다. 해당 파일에 복잡해지면 별도의 Profile 파일로 분리할 수 있습니다.
Profile 컴포넌트는 Gallery 내부에서 여러 번 렌더링되기 때문에 Gallery 컴포넌트를 부모 컴포넌트 Profile 컴포넌트를 자식 컴포넌트라고 부를 수 있습니다. 컴포넌트는 한 번 정의되면 재사용이 가능합니다.
🚨 React 컴포넌트는 표준 JavaScript 함수이지만 첫번째 문자를 대문자로 작성하지 않으면 작동하지 않습니다.
컴포넌트 내부에 정의해서는 안 됩니다.
export default function Gallery() {
// 🔴 Never define a component inside another component!
function Profile() {
// ...
}
// ...
}
// The snippet above is very slow and causes bugs. Instead, define every component at the top level:
export default function Gallery() {
// ...
}
// ✅ Declare components at the top level
function Profile() {
// ...
}
Components all the way down
React 애플리케이션은 root 컴포넌트에서 시작합니다. 이는 새로운 프로젝르를 시작할 때 자동 생성됩니다.
대부분의 React 앱은 컴포넌트를 끝까지 사용합니다. 즉, 버튼과 같은 재사용 가능한 부분뿐만 아니라 사이드바, 목록, 최종적으로는 전체 페이지와 같은 더 큰 부분에도 컴포넌트를 사용할 수 있습니다. 컴포넌트는 일부가 한 번만 사용되더라도 UI 코드와 마크업을 구성하는 편리한 방법입니다.
React 기반 프레임워크는 이를 한 단계 더 발전시킵니다. 빈 HTML 파일을 사용하고 React가 JavaScript로 페이지 관리를 인수하도록 대신, React 컴포넌트에서 자동으로 HTML을 생성합니다. 이를 통해 JavaSCript 코드가 로드되기 전에 앱에서 일부 콘텐츠를 표시할 수 있습니다.
