컴포넌트 만들기

자바스크립트 파일을 만들고 이를 App.js 컴포넌트에서 불러와보겠다.
보통 파일을 여러 형식으로 만들던데,
난 export default 형식이 가장 편해서 이 방법으로 정착했다.

export default는 ES6부터 등장한 구문이다.

• 장점

  • 편리한 사용성
  • 단일 모듈로 사용
  • 이름 없는 내보내기

• 단점

  • 명시적인 가져오기가 필요하지 않음
  • 다중 내보내기의 어려움

import React from "react";
export default function Todo() {

	return (
    	<div>
        	<input type = "checkbox" id = "todo0" name = "todo0" value = "todo0" />
            <label for ="todo0"> Todo 컴포넌트 만들기 </label>
        </div>
    )

}

위 처럼 기본 형식의 컴포넌트를 화면에 렌더링 하기 위해
현재 기본 설정으로 렌더링 되고 있는 App 컴포넌트에 import 시킨다.

import './App.css';
import Todo from './Todo';

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

이런식으로 각각의 서비스를 구현한 컴포넌트들을 상호작용 하게끔 만드는 것이 중요한것같다.