컴포넌트 (1)

- 개요

컴포넌트는 화면을 구성하는 하나의 요소로 스스로 상태를 관리하며 하나의 JSX를 반환하는 캡슐화된 함수를 의미한다

화면에 무엇을 그릴지 결정하는 JSX와 다르게 컴포넌트는 기본적으로 함수이므로

자신만의 고유한 로직이 포함될 수 있고 스스로 상태를 가질 수 있어 상태가 변하면 알아서 반영된다

 

- 컴포넌트의 사용

// App 컴포넌트

export default function App() {
  return (
    <div>
      <h1>Hello,</h1>
      <h2>World</h2>
    </div>
  );
}

 

위와 같이 최상위 컴포넌트인 App 컴포넌트의 코드를 구성하였다

 

// Hello 컴포넌트

export default function Hello() {
  return (
    <div>
      <h1>Hello,</h1>
    </div>
  );
}

 

// World 컴포넌트

export default function World() {
  return (
    <div>
      <h2>World</h2>
    </div>
  );
}

 

App 컴포넌트를 위와 같이 Hello 컴포넌트와 World 컴포넌트의 2개의 하위 컴포넌트로 분리할 수 있다

 

import ReactDOM from "react-dom";
import Hello from "./Hello";
import World from "./World";

ReactDOM.render(
  <>
    <Hello />
    <World />
  </>,
  document.getElementById("root")
);

 

2개의 하위 컴포넌트를 index.js 코드에서 호출하여 사용한다

import 키워드와 export 키워드를 사용하여 컴포넌트가 포함된 모듈을 불러오고 내보낼 수 있다

 

 

최종 실행 결과는 위와 같다

 

- 컴포넌트 사용시 주의사항

1) PascalCase의 사용

// PascalCase
MyComponent, TestComponent ...

 

컴포넌트의 이름은 반드시 PascalCase를 사용하여 정의해야 한다

CamelCase와 비슷하지만, 첫 단어의 첫 글자도 대문자로 정의해야 한다는 차이점이 존재한다

 

2) App.js - 최상위 컴포넌트

// App 컴포넌트

export default function App() {
  return (
    <div>
      <h1>Hello,</h1>
      <h2>World</h2>
    </div>
  );
}

 

일반적으로 React에서 위와 같이 작성된 App 컴포넌트는 

모든 하위 컴포넌트들을 포함하는 트리의 최상단 root 컴포넌트로 사용한다

 

3) index.js - 렌더링의 진입점

import ReactDOM from "react-dom";
import Hello from "./Hello";
import World from "./World";

ReactDOM.render(
  <>
    <Hello />
    <World />
  </>,
  document.getElementById("root")
);

 

index.js는 React가 가장 먼저 실행하는 파일로,

index.html 파일의 화면에 최상위 컴포넌트인 App.js을 렌더링하는 역할을 수행한다