리액트 공식문서 스터디 1주차 - 1

Your First Component

1. 컴포넌트는 React의 핵심 개념 중 하나입니다.

2. 컴포넌트는 사용자 인터페이스 (UI)를 구축하는 토대입니다.

Components: UI building blocks

<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는 MarkUP, CSS, JavaScript 커스텀 컴포넌트로 결합할 수 있게 해줍니다.

  여기로 컴포넌트란 앱에서 재사용 가능한 UI 요소이다.

• 위의 목차코드 또한 <TableOfContents /> 컴포넌트로 만들어 모든 페이지에서 렌더링할 수 있습니다.

그렇다면 컴포넌트화를 왜 해야하는 걸까?

• 프로젝트가 커질수록 기존에 작성한 컴포넌트를 재사용하여 더 빠르고 쉽게 디자인을 구현할 수 있습니다.
• 또한 Chakra UI , Material UI 같은 React 오픈소스 라이브러리를 이용하여 더 빠르게 구현할 수도 있습니다.

Defining a component

• 이전에는 웹 페이지를 만들 때 웹 개발자들은 콘텐프를 마크업으로 작성한 후, 자바스크립트로 상호작용을 추가했습니다.

• 더 많은 상호작용을 위해서 React가 나타났고, React 컴포넌트는 마크업을 더할 수 있는 자바스크립트 함수입니다.

1. Export the component

• export default 문법을 사용하여 파일내에 주된 함수로 지정할 수 있습니다.

• 또한 이 함수를 다른 파일에서 import하여 사용할 수 있습니다.

2. Define the function

• function 함수명() {} 구문을 사용해 함수명에 해당하는 JavaScript 함수를 정의합니다.

  React 컴포넌트는 일반 JavaScript 함수이지만, 이름을 반드시 `대문자`로 시작해야 정상적으로 작동합니다! (소문자로 시작하면 컴포넌트로 인식되지 않음)

3. Add markup

• return 구뭄은 한 줄로 작성하거나, 같은 줄에 있지 않다면 반드시 소괄호로 감싸야합니다.

Using a component

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

• Profile 컴포넌트를 정의해 다른 컴포넌트 안에서 중첩하여 사용할 수 있습니다.

• 위 코드처럼 여러 개의 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 만들 수 있습니다.

1. What the browser sees

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

• <section>은 소문자로 시작해 React가 HTML 태그로 인식합니다.

• <Profile />는 대문자로 시작해 React가 사용자가 만든 Custom 컴포넌트로 인식합니다.

• 그렇기에 브라우저에서는 컴포넌트 대신 HTML 태그만 표시하게 됩니다. <Proile> -> <img>

2. Nesting and organizing components

• 컴포넌트는 일반 자바스크립트 함수이므로, 크기가 작거나 관련된 컴포넌트는 같은 파일에 함께 둘 수 있다.

• 부모 컴포넌트가 자식 컴포넌트를 여러번 렌더링할 수 있고, 한 번 정의된 컴포넌트는 여러 곳에서 반복 사용이 가능하다.

• 컴포넌트 정의를 다른 컴포넌트 내부에 중첩하면 안 되고, 항상 파일의 최상단에 선언해야 한다.

Importing and Exporting Components

• 컴포넌트의 재사용성이 React의 진정한 장점이다.

• 여러 컴포넌트를 만들어 서로 중첩해서 사용할 수 있지만, 컴포넌트가 많아질수록 파일을 분리하는 것이 효율적이다.

• 파일을 나누면 코드를 더 쉽게 파악할 수 있고, 다양한 곳에서 컴포넌트를 재사용하는 것이 가능하다.

1. The root component file

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

• 컴포넌트가 작거나 서로 연관되어 있으면, 한 파일에 함께 둘 수 있다.

• 파일이 너무 커지면 Profile 같은 컴포넌트를 별도 파일로 이동할 수 있습니다.

2. Exporting and importing a component

import Gallery from "./Gallery.js";

export default function App() {
  return <Gallery />;
}

• 루트 컴포넌트 파일에서 분리해서 각각 export한 뒤 import하여 관리하는 것이 더 좋습니다.

3. Exporting and importing multiple components from one file

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

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

• 한 파일에 default export는 하나만 가능하지만, 여러 개의 named export는 가능합니다.

4. Exporting and importing multiple components from the same file

• 컴포넌트가 더 많아지면 Profile, Gallery 등 각각을 Profile.js, Gallery.js처럼 별도 파일로 분리하여 관리합니다.

Writing Markup with JSX

• JSX : JavaScript file 안에서 HTML-like markup을 사용할 수 있게 하는 extension

1. JSX: Putting markup into JavaScript

• 이전에는 content와 logic을 HTML과 JavaScript 파일에 각각 분리해서 작성했다.

• Web이 더 인터랙티브해지면서 자바스크립트(로직)가 content(HTML)까지 직접 다루는 일이 많아졌다.

• React에서는 렌더링 로직과 마크업(markup)을 한 곳에서 모두 관리한다. 이 장소가 바로 "Component"(컴포넌트)이다.

• Rendering logic과 markup을 같은 자리에 두면, 매번 수정할 때마다 둘이 항상 동기화된다. 반면 관련 없는 것들(예: 버튼과 사이드바)은 분리돼 있으므로 개별적으로 안전하게 수정할 수 있다.

• React 컴포넌트 함수는 JSX 마크업을 포함한다.

• JSX와 React는 서로 다른 개념이다. JSX는 문법 확장(syntax extension)이고, React는 자바스크립트 라이브러리이다. 두 개념은 독립적으로 사용할 수도 있다.

2. The Rules of JSX

• JSX와 HTML의 차이점

  • 여러 요소를 반환하려면 가장 바깥에 하나의 태그로 감싸야 합니다.

  • 모든 태그를 닫아줘야 합니다.

  • 대부분의 속성은 camelCase로 작성해야 하며, class 대신 className을 씁니다.