하나의 js파일에서 두개의 컴포넌트 선언

박은정·2021년 10월 5일
0

TIL

목록 보기
31/72
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파일에서 선언해줘도 되긴한다

profile
새로운 것을 도전하고 노력한다

0개의 댓글