1. Describing the UI

UI 묘사하기

React는 사용자 인터페이스(UI)를 렌더링하기 위한 라이브러리이다.
React를 사용하면 재사용 가능하고 중첩 가능한 구성 요소로 결합가능하다.

1. Your first component

리액트 애플리케이션은 '컴포넌트'라는 독립적인 UI 조각으로 빌드된다. React 컴포넌트는 자바스크립트 함수로 마크업을 뿌린다.

1.1 Components: UI building blocks

React를 사용하면 마크업, css, javascript을 재사용 가능한 '컴포넌트'로 결합할 수 있다.

<!-- as is -->
<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>

<!-- tobe -->
<TableOfContents />

1.2 Defining a component

React 컴포넌트는 자바스크립트 함수로 마크업을 뿌린다.

컴포넌트 빌드 방법

1) 컴포넌트 내보내기
export default : 파일을 내보내는데 사용하는 접두사로 javascript 기본 구문
2) 함수 정의
function NAME() : NAME이라는 이름으로 javascript 함수 정의
3) 마크업 추가
jsx(javaScript 파일 내에서 html과 유사한 마크업을 작성할 수 있는 javascript용 구문 확장)로 작성
return 과 같은 위치이거나, 괄호로 묶어야 한다.

1.3 Using a component

하나의 컴포넌트는 다른 컴포넌트에 중첩될 수 있다

export default funtion Gallery() {
    return (
        <div>
            <Profile />
        </div>
    )
}

1.4 What the browser sees (브라우저가 보는 것)

소문자: section 과 같은 html 태그로 인식한다
대문자: Profile 과 같은 react 컴포넌트로 인식한다 -> 컴포넌트는 항상 대문자로 네이밍하기!

1.5 Nesting and organizing components

컴포넌트는 javascript 함수이므로 한 파일 안에 여러 컴포넌트를 가질 수 있다.
상위 컴포넌트(부모 컴포넌트) - 하위 컴포넌트(자식 컴포넌트)
하위 컴포넌트는 상위 컴포넌트 내부에서 렌더링 된다.

중첩이 불가능한 경우: 컴포넌트 내에서 컴포넌트 정의는 불가능

---

2. Importing and Exporting Components (컴포넌트 가져오기 / 내보내기)

컴포넌트는 재사용이 가능해 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있다.
그래서 많은 컴포넌트가 구성되므로 각각의 컴포넌트는 다른 파일에 구성하는 것이 좋다.

2.1 The root component file

cra에서 루트 컴포넌트는 App.js
Next.js와 같은 라우팅 프레임워크의 루트 컴포넌트는 페이지마다 다르다

2.2 Exporting and importing a component (컴포넌트 내보내기 / 가져오기)

1) 컴포넌트를 넣을 js 파일 만들기
2) export default로 내보내기
3) import로 가져오기

import Gallery from './Gallery.js';

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

2.3 Exporting and importing multiple components from the same file (동일한 파일에서 여러 컴포넌트 내보내기 / 가져오기)

동일한 파일 내 default 키워드를 사용하지 않은 컴포넌트는 중괄호 사용하기

import {Profile} from ./Gallery.js';

---

3. Writing Markup with JSX

JSX 는 javascript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 javascript 구문 확장이다.

The Rules of JSX

1.  단일 루트 요소 반환
2. 모든 태그 닫기
3. 카멜케이스 (대부분)