import React from 'react';
const TodoItem = ({ todo, onToggle, onRemove }) => {
return (
<div>
<input type="checkbox" />
<span>예제 리스트</span>
<button>삭제</button>
</div>
);
};
const Todos = ({
input, // input에 입력되는 텍스트
todos, // 할 일 목록이 들어 있는 객체
onChangeInput,
onInsert,
onToggle,
onRemove,
}) => {
const onSubmit = e => {
e.preventDefault();
};
return (
<div>
<form onSubmit={onSubmit}>
<input />
<button type="submit">등록</button>
</form>
<div>
<TodoItem />
<TodoItem />
<TodoItem />
<TodoItem />
<TodoItem />
</div>
</div>
);
};
export default Todos;
위 코드처럼 하나의 js파일에 두개의 컴포넌트를 선언해줘도 된다
Todos 컴포넌트와 TodoItem 컴포넌트를 각각의 js파일에서 선언해줘도 되긴한다