[React Docs Beta] Learn React - Describing the UI

먼지·2023년 1월 26일

React

목록 보기

6/8

UI 설명

첫 번째 컴포넌트

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

배우게 될 것

컴포넌트란?

React application에서 컴포넌트가 수행하는 역할

첫 번째 컴포넌트 작성 방법

리액트 애플리케이션은 컴포넌트 라고 불리는 고립된 UI 조각으로 빌드됩니다. 리액트 컴포넌트는 마크업을 뿌릴 수 있는 JavaScript 함수입니다. 컴포넌트는 버튼만큼 작거나 전체 페이지만큼 클 수도 있습니다. 여기 세 Profile 컴포넌트를 렌더링하는 Gellery 컴포넌트가 있습니다.

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는 user interfaces(UI)를 렌더링하기 위한 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React는를 사용하면 재사용가능하고 중첩가능한 components로 결합할 수 있습니다. 웹사이트에서 전화 앱에 이르기까지, 화면에 있는 모든 것을 컴포넌트로 나눌 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 원하는 대로 바꾸고, 조건부로 표시하는 방법에 대해 설명합니다.

In this chapter

첫 번째 React 컴포넌트 작성 방법

multi-component 파일 생성 시기와 방법

JSX를 사용하여 JavaScript에 마크업을 추가하는 방법

컴포넌트에서 JavaScript 기능에 액세스하기 위해 JSX와 함께 curly braces를 사용하는 방법

props로 컴포넌트를 구성하는 방법

컴포넌트를 조건부로 렌더링하는 방법

한 번에 여러 컴포넌트를 렌더링하는 방법

컴포넌트를 순수하게 유지함으로써 혼란을 일으키는 버그를 회피하는 방법

Components: UI building blocks

웹에서 HTML을 사용하면 <h1> 및 <li>와 같은 built-in set of tags을 사용하여 풍부한 구조화된 문서를 만들 수 있습니다.

<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의 사이드바, 아바타, 모달, 드롭다운 뒤에 있습니다.

너무 많아서 중요하다 생각하는 부분들만 정리해야겠다..;

리액트를 통해 마크업, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 custom "components"로 결합할 수 있습니다.

프로젝트가 성장함에 따라, 이미 작성한 컴포넌트를 재사용하여 많은 디자인을 구성할 수 있어 개발 속도가 빨라집니다. Chakra UI 및 Material UI와 같은 React 오픈 소스 커뮤니티에서 공유하는 수천 개의 컴포넌트로 프로젝트를 바로 시작할 수도 있습니다.

Defining a component

전통적으로 웹 페이지를 만들 때, 웹 개발자는 콘텐츠를 표시한 다음 일부 JavaScript에 뿌려 상호 작용을 추가했습니다. React는 같은 기술을 사용하면서도 interactivity를 우선시합니다. React 컴포넌트는 markup을 뿌릴 수 있는 JavaScript 함수입니다.

Step 1: Export the component

export default 접두어는 자바스크립트의 표준 구문 입니다. (React에 국한되지 않음). 나중에 다른 파일에서 가져올 수 있도록 파일의 main function을 표시할 수 있습니다 (Importing and Exporting Components의 자세히 알아보세용!)

Step 2: Define the function

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

🗨️ Pitfall
리액트 컴포넌트는 일반적인 JavaScript 함수이지만 이름은 대문자로 시작해야 합니다. 그렇지 않으면 동작하지 않습니다!

https://beta.reactjs.org/learn/your-first-component

컴포넌트 가져오기 및 내보내기

https://beta.reactjs.org/learn/importing-and-exporting-components

한 파일에 여러 컴포넌트를 선언할 수 있지만, 큰 파일은 navigate하기 어려울 수 있습니다. 이 문제를 해결하려면 컴포넌틀를 자체 파일로 export 한 다음 다른 파일에서 import로 해당 컴포넌트를 가져올 수 있습니다.

// Gallery.js

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

// Profile.js

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

컴포넌트의 마법은 재사용성에 있습니다. 다른 컴포넌트로 구성된 컴포넌트를 작성할 수 있습니다. 그러나 컴포넌트를 중첩하는 경우가 많다면 컴포넌트를 다른 파일로 분할하는 것이 좋습니다. 이를 통해 파일을 쉽게 검색하고 더 많은 곳에서 컴포넌트를 재사용할 수 있습니다.

You will learn

루트 컴포넌트 파일이란

컴포넌트를 가져오고 내보내는 방법

default 및 named 된 가져오기 및 내보내기를 사용해야 하는 경우

하나의 파일에서 여러 컴포넌트를 가져오고 내보내는 방법

컴포넌트를 여러 파일로 분할하는 방법

루트 컴포넌트 파일

첫 번째 컴포넌트에서 Profile 컴포넌트와 Gallery 컴포넌트

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

이들은 현재 App.js라는 이름의 루트 컴포넌트 파일에 존재합니다. Create React App에서 앱은 src/App.js에 위치합니다. 그러나 설정에 따라, 루트 컴포넌트가 다른 파일에 있을 수 있습니다. Next.js와 같은 file-based routing 프레임워크를 사용하는 경우 루트 컴포넌트는 페이지마다 다릅니다.

컴포넌트 내보내기 및 가져오기

앞으로 랜딩 화면을 바꾸고 거기에 과학 책 목록을 넣고 싶다면 어떨까요? 또는 모든 프로필을 다른 곳에 배치하고 싶다면요? Gallery와 Profile을 루트 컴포넌트 파일 밖으로 이동시키는 것이 좋습니다. 이렇게 하면 더 모듈화되어 다른 파일에서도 재사용할 수 있습니다. 컴포넌트는 다음 세 단계로 이동할 수 있습니다:

컴포넌트를 넣을 새 JS 파일을 만듭니다.
해당 파일에서 함수 컴포넌트를 내보냅니다. (default나 named 중 하나의 exports를 사용)
컴포넌트를 사용할 파일로 가져옵니다. (default 또는 named된 내보내기를 가져오기 위한 해당하는 기술을 사용)

📝 Note
다음과 같이 .js 파일 확장자가 없는 파일이 나타날 수 있습니다.
import Gallery from './Gallery';
'./Gallery.js' 또는 './Gallery'는 React에서 작동하지만 전자는 native ES Modules 작동 방식에 더 가깝습니다.

🤿 Deep Dive
Default vs named exports
JavaScript로 값을 내보내는 방법에는 default exports와 named exports 두 가지가 있습니다. 지금까지의 예제에서는 default exports만을 사용했습니다. 그러나 동일한 파일에서 둘 중 하나 또는 둘 다 동일한 파일에서 사용할 수 있습니다. 파일에는 하나 이상의 default exports를 가질 수 없지만, 원하는 만큼 named exports를 가질 수 있습니다.