react의 공식 문서를 보고 그 동안 놓치고 있었던 개념들을 다시 정리하는 시간을 가지자!

A. UI 표현하기

1. 첫 번째 컴포넌트

컴포넌트는 UI를 구성하는 작은 단위이다. 웹 페이지가 기계라고 하면 컴포넌트는 기계를 구성하는 부품정도 된다고 이해를 하면 편하다.

컴포넌트의 작성

• 대문자로 작성할 것

  리엑트 컴포넌트는 항상 대문자로 시작하는 네이밍을 가져야 한다. ex) <profile /> X → <profile /> O 소문자로 처리할 경우 HTML 태그로 인식해 오류가 발생하게 된다.

• 컴포넌트를 중첩해서 정의하지 말 것

  export default function Gallery() {
    function Profile() {
      // ...
    }
    // ...
  }
  

  위에 있는 코드와 같이 컴포넌트를 중접하는 실수를 하면 안된다. 성능에 안 좋은 영향을 주며 버그가 발생할 가능성이 있다.

2. 컴포넌트의 import (가져오기) export (내보내기)

컴포넌트는 export를 통해 내보내 질 수 있으며 다른 컴포넌트에서 import하여 가져와서 재사용이 가능하다.

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

컴포넌트를 import, export하는 방법

• 자바스크립트에는 export의 방법이 default와 named 두 가지가 존재한다. 이에 따라서 import하는 방법 역시 달라진다.

  Syntax	Export 구문	Import 구문
  Default	export default function Button() {}	import Button from './button.js';
  Named	export function Button() {}	import { Button } from './button.js';

• 방법

  • Default: export default로 내보내고 → 이름으로 가져온다.
  • Named: export로 내보내고 → {이름} 파일명을 객체에 감싸서 가져온다.

주의점: 아래 그림과 같이 → default export는 한 파일에서 한 개만 존재 할 수 있다.

3. JSX로 마크업 작성

JSX는 자바스크립트 확장 문법으로 자바스크립트에 HTML을 작성하게 해준다. 기존 HTML + JS 구조보다 코드가 간결해지고 읽기도 편하다.