[React] - 컴포넌트 생성

https://namji9507.tistory.com/18

저번에 진행한 프로젝트를 예제로 계속 진행하겠습니다.

---

컴포넌트 생성

• src 디렉터리에 Hello.js라는 파일을 생성 후 다음과 같이 작성합니다.

Hello.js 생성

• 리액트 컴포넌트를 만들 때
  import React from 'react';
  를 통해서 리액트를 불러와야 합니다.
• 리액트 컴포넌트는 함수형태와 클래스형태로 작성할 수 있습니다.
  지금은 함수형으로 작성해보겠습니다.
• 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX라고 부릅니다.
• 코드의 최하단에
  export default Hello;
  를 작성해야 합니다.
  이 코드는 Hello라는 컴포넌트를 내보내겠다는 의미입니다.
  이렇게 해주면 다른 컴포넌트에서 불러와서 사용할 수 있습니다.
• 이 컴포넌트를 App.js에서 불러와서 사용해보겠습니다.

App.js

상단에 있던

• import logs from './logo.svg';
• import './App.css';

는 SVG 파일을 불러오고, CSS를 적용하는 코드인데 현재 불필요하기 때문에 제거했습니다.

컴포넌트는 일종의 UI 조각이고, 쉽게 재사용 할 수 있습니다.