• 목차

개요

• 새로운 컴포넌트 Todo.js 를 만들어보자.
• src/components : Root Component 인 App.js 를 제외한 모든 컴포넌트를 보관한다.
• 우리는 TITLE 과 BUTTON 을 가진 여러 개의 element 를 만들고자 한다.
• 같은 코드를 여러 번 작성하는 것이 아닌 Todo.js 와 같이 컴포넌트를 작성하여 import 를 하자.

Todo.js

function Todo() {
  return (
      <div className='card'>
        <h2>TITLE</h2>
        <div className='actions'>
          <button className='btn'>Delete</button>
        </div>
      </div>
    );
}

export default Todo;

• 함수(컴포넌트)의 이름은 무조건 대문자로 시작해야 한다.
• 이유는 내장 HTML element 와 구분하기 위함이다.

App.js

import Todo from "./components/Todo"

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo />
			<Todo />
    </div>
  )
}

export default App

• App.js 에서는 import 를 통해서 Todo component 의 jsx 코드를 재사용 할 수 있다.

요약

• Todo.js 와 같이 재사용이 필요한 코드들은 다른 컴포넌트로 분리하여 사용하자.
• 변경은 한 곳(Todo.js)에서만 진행하고, 여러 번 재사용할 수 있다.