리액트 공식문서 - 컴포넌트

React에서 컴포넌트의 의미

• 컴포넌트 : 마크업·CSS·JavaScript를 하나로 묶어 UI를 구성하는 재사용 가능한 독립적 화면 단위

React 컴포넌트는 마크업(HTML)으로 뿌릴 수 있는 JavaScript 함수이다

• 리액트 컴포넌트 : UI를 만드는 코드 덩어리 (JS함수로 작성되고, 그 함수 안에서 HTML을 만들어주는 코드를 작성함)

export default function MyButton() {
  return (
    <div>
      <button>클릭하세요</button>
      <img
        src="https://i.imgur.com/MK3eW3Am.jpg"
        alt="Katherine Johnson"
      />
    </div>
  );
}

• MyButton 함수 : 리액트 컴포넌트 -> <button>클릭하세요</button>라는 마크업 반환

컴포넌트 빌드 방법
1. 컴포넌트 내보내기 (export default 접두사)
2. 함수 정의하기
3. 마크업 추가하기

• : HTML처럼 작성되었지만 실제로 JS. 이 구문을 JSX라고 함

컴포넌트 중첩 및 구성

• 컴포넌트는 일반 JS 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있음.
• 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 장점

주의

• 컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안됨.

export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됩니다!
  function Profile() {
    // ...
  }
  // ...
}

• 자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우, 정의를 중첩하는 대신 props로 전달

한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법

• Gallery.js

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

• App.js

import Gallery from './Gallery.js'; // Default 방식
import { Profile } from './Gallery.js'; // Named 방식

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

1. named export 방식으로 Gallery.js 파일에서 Profile 컴포넌트 export
2. named import 방식으로 Gallery.js 파일에서 Profile 컴포넌트를 import (중괄호 사용)

• 한 파일에서는 단 하나의 default export만 사용할 수 있지만 named export는 여러 번 사용할 수 있습니다.