함수형 컴포넌트(Functional Components)

함수형 컴포넌트는 자바스크립트 함수이며,
props라는속성 개체를 수신하여 UI를 표출하는 HTML(JSX)을 반환한다.
useState훅을 사용하여 컴포넌트 내부 상태(state)관리를 할 수 있다.

컴포넌트 사용법

1. 컴포넌트 생성 및 설정

Greet.js

import React from "react";

function Greet() {
    return <h1>Hello React</h1>
}

export default Greet;

export default로 외부에서 컴포넌트 접근이 가능하게 설정

2. 컴포넌트를 가져오고 선언

App.js

import './App.css';
import Greet from './components/Greet'

function App() {
  return (
    <div className="App">
      <Greet/>
    </div>
  );
}

export default App;

import 하여 컴포넌트를 사용하고 HTML 태그처럼 코드를 입력하면 된다.

화살표 함수 가능

const Greet = () => <h1>Hello React</h1>

1.번 함수와 같다.

export

export default를 사용할 경우 한가지의 함수만 접근 가능, 동일한 이름이 아니더라도 가져오기 가능

import Test from './components/Greet'
function App() {
  return (
    <div className="App">
      <Test/>
    </div>
  );
}

export만 사용할 경우 여러 함수 접근 가능하고, 동일한 함수 이름으로 가져와야한다.

export const Greet = () => <h1>Hello React</h1>

export 'default' (imported as 'Test') was not found in './components/Greet' (possible exports: Greet)

에러 발생