きどうはんのう

¥АААААААААААА

React
├── README.md
├── package.json
├── public
│ ├── favicon.svg
│ ├── index.html
├── src
│ ├── app
│ │ ├── App.css
│ │ ├── App.js
│ │ └── App.test.js
│ ├── assets
│ │ └── logo.svg
│ ├── components
│ │ └── index.js
│ ├── containers
│ │ └── index.js
│ ├── index.css
└─└── index.js

🤔 なぜすべてのファイルがsrcの下にあるのですか?

分割¥コード

// Todo.js
import React from 'react';

export function Todo({ title }) {
  return <div>{title}</div>;
}


// TodoList.js
import React, { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState([]);
  const onClick = () => {
    // 동적 임포트 사용!!
    import('./Todo.js').then(({ Todo }) => {
      const position = todos.length + 1;
      const newTodo = <Todo key={position} title={'할 일 ${position'} />;
      setTodos([...todos, newTodo]);
    });
  };
  return (
    <div>
      <button onClick={onClick}>할 일 추가</button>
    </div>
  );
}

🤔 コードを分割する理由は？