리액트 공식 문서 번역-01. 첫 번째 구성 요소

컴포넌트는 React의 핵심 개념 중 하나입니다. UI를 구축하는 데 필요한 기반이며, 이는 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>

 

마크업은 이러한 기본 태그(<h1> 및 <li>)를 사용하여 구조화된 문서를 만드는 데 사용됩니다. 이러한 마크업은 스타일을 위한 CSS 및 상호 작용을 위한 JavaScript와 결합되어 사이드바, 아바타, 모달, 드롭다운 등과 같은 모든 UI 요소를 웹에서 볼 수 있도록합니다.

 

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

 

HTML 태그와 마찬가지로 구성, 순서 및 중첩된 구성 요소를 사용하여 전체 페이지를 디자인할 수 있습니다.

 

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

 

컴포넌트 정의하기

전통적으로 웹 개발자들은 콘텐츠를 마크업한 다음 일부 JavaScript를 덧붙여 상호작용성을 추가하는 방식으로 웹 페이지를 만들어 왔습니다. 이는 웹에서 상호작용성이 필수적이지 않았을 때에는 잘 작동했습니다. 하지만 이제는 많은 사이트와 모든 앱에서 필수적으로 요구됩니다. React는 여전히 같은 기술을 사용하면서도 상호작용성을 우선시하는데, React 컴포넌트는 마크업을 덧붙일 수 있는 JavaScript 함수입니다. 아래 예시를 편집해보세요

https://codesandbox.io/s/1v85yy?file=/App.js&utm_medium=sandpack

vigilant-shockley-1v85yy - CodeSandbox

 

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

 

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

export default 접두사는 React에 특화된 것이 아닌 표준 JavaScript 구문입니다. 파일의 주 함수를 표시하여 다른 파일에서 나중에 가져올 수 있도록 합니다. (Importing and Exporting Components!에서 가져오는 방법에 대해 더 알아보세요!)

 

2단계: 함수 정의

function Profile() {}로 JavaScript 함수의 이름이 Profile인 함수를 정의합니다.

 

💡 React 컴포넌트는 일반적인 JavaScript 함수이지만, 이름이 대문자로 시작하지 않으면 작동하지 않습니다!

 

3단계: 마크업 추가하기

컴포넌트는 src와 alt 속성을 가진 <img/> 태그를 반환합니다. <img />는 HTML과 같이 작성되어 보이지만, 사실은 JavaScript로 구현된 것입니다! 이 구문은 JSX라고 불리며, JavaScript 내에 마크업을 포함시킬 수 있도록 해줍니다.

리턴 문은 이 컴포넌트에서와 같이 한 줄로 작성할 수 있습니다.

 

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>
);

💡 괄호 없이 return 키워드 이후 다른 줄에 있는 코드는 무시됩니다!

 

컴포넌트 사용하기

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

https://codesandbox.io/s/zd7vzo?file=/App.js&utm_medium=sandpack

 

nifty-waterfall-zd7vzo - CodeSandbox

 

브라우저가 보는 것

대소문자의 차이를 주목해보세요:

• <section>은 소문자로 작성되어 있어, React는 이것이 HTML 태그를 나타낸다는 것을 알고 있습니다.
• <Profile />은 대문자로 시작하므로, 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>

 

컴포넌트 중첩과 구성

컴포넌트는 일반적인 자바스크립트 함수이므로, 하나의 파일에 여러 컴포넌트를 유지할 수 있습니다. 이는 컴포넌트가 상대적으로 작거나 서로 관련이 깊을 때 편리합니다. 이 파일이 혼잡해진 경우, Profile을 별도의 파일로 이동할 수 있습니다. 이에 대해서는 곧 Imports 페이지에서 배우게 될 것입니다.

 

Profile 컴포넌트가 갤러리 안에서 렌더링되기 때문에 갤러리는 각 Profile을 "자식"으로 렌더링하는 부모 컴포넌트라고 할 수 있습니다. 이것이 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를 통해 전달하세요.

 

끝까지 이어지는 컴포넌트

React 애플리케이션은 "루트(root)" 컴포넌트에서 시작합니다. 보통 새 프로젝트를 시작할 때 자동으로 생성됩니다. 예를 들어, CodeSandbox나 Create React App을 사용하면 루트 컴포넌트가 src/App.js에 정의되어 있습니다. Next.js 프레임워크를 사용하는 경우, 루트 컴포넌트는 pages/index.js에 정의됩니다. 이러한 예제에서는 루트 컴포넌트를 내보내고 있습니다.

대부분의 React 앱은 컴포넌트를 끝까지 사용합니다. 이는 버튼과 같은 재사용 가능한 요소 뿐만 아니라 사이드바, 목록 및 마지막으로 완전한 페이지와 같은 더 큰 조각들에도 컴포넌트를 사용한다는 것을 의미합니다! 컴포넌트는 UI 코드와 마크업을 구성하는 편리한 방법입니다. 비록 일부 컴포넌트가 한 번만 사용되더라도 말이죠.

React 기반 프레임워크는 이를 한 단계 더 나아가게 합니다. 빈 HTML 파일을 사용하여 React가 JavaScript로 페이지를 관리하도록 하지 않고, React 컴포넌트로부터 자동으로 HTML을 생성합니다. 이렇게 하면 JavaScript 코드가 로드되기 전에 일부 내용을 표시할 수 있습니다.

그러나 여전히 많은 웹사이트가 기존 HTML 페이지에 상호 작용성을 추가하기 위해 React를 사용합니다. 전체 페이지를 위한 단일 루트 컴포넌트 대신 많은 루트 컴포넌트를 가지고 있습니다. 필요한 만큼 많거나 적게 React를 사용할 수 있습니다.

 

요약

React를 첫번째로 배워보았습니다! 몇가지 주요 포인트를 다시 한번 되집어보겠습니다.

• React를 사용하면 앱을 위한 재사용 가능한 UI 요소인 컴포넌트를 생성할 수 있습니다.
• React 앱에서 UI의 모든 부분은 컴포넌트입니다.
• React 컴포넌트는 다음을 제외하고 일반적인 JavaScript 함수입니다:
  • 이름이 항상 대문자로 시작합니다.
  • JSX 마크업을 반환합니다.

 

2023.07.08 - [React/Documentation] - 리액트 공식 문서 번역-02. 컴포넌트 가져오기 및 내보내기

리액트 공식 문서 번역-02. 컴포넌트 가져오기 및 내보내기