전치

MDN의 React 튜토리얼을 배운 것을 복습하고 있습니다.
이 기사 의 #2입니다
본 기사에서는 「컴포넌트화」에 대해 복습하고 있습니다.

뭔가 실수가 있으면 지적해 주시면 매우 격려가 됩니다.

React 앱 구성

コンポーネント化 … 앱내의 요소를 분할해 가 관리, 기술하기 쉽게 해 가는 것.
튜토리얼에서는 아래와 같은 긴 것 같은 JSX를 서서히 컴퍼넌트화해 간다

App.js

function App(props) {
  return (
    <div className="todoapp stack-large">
      <h1>TodoMatic</h1>
      <form>
        <h2 className="label-wrapper">
          <label htmlFor="new-todo-input" className="label__lg">
            What needs to be done?
          </label>
        </h2>
        <input
          type="text"
          id="new-todo-input"
          className="input input__lg"
          name="text"
          autoComplete="off"
        />
        <button type="submit" className="btn btn__primary btn__lg">
          Add
        </button>
      </form>
      <div className="filters btn-group stack-exception">
        <button type="button" className="btn toggle-btn" aria-pressed="true">
          <span className="visually-hidden">Show </span>
          <span>all</span>
          <span className="visually-hidden"> tasks</span>
{// ...略}

컴포넌트화

우선 각todo를li태그를 사용하여 기술하고 있는 아래 부분

App.js

{// ...略}
<li className="todo stack-small">
    <div className="c-cb">
    <input id="todo-0" type="checkbox" defaultChecked={true} />
    <label className="todo-label" htmlFor="todo-0">
        Eat
    </label>
    </div>
    <div className="btn-group">
    <button type="button" className="btn">
        Edit <span className="visually-hidden">Eat</span>
    </button>
    <button type="button" className="btn btn__danger">
        Delete <span className="visually-hidden">Eat</span>
    </button>
    </div>
</li>
<li className="todo stack-small">
    <div className="c-cb">
    <input id="todo-1" type="checkbox" />
    <label className="todo-label" htmlFor="todo-1">
        Sleep
    </label>
{// ...略}

우선은 적절한 컴퍼넌트명으로 파일을 작성한다.

mkdir src/component
touch src/component/Todo.js

Todo.js 내에서 function 을 정의하고 return() 으로 대상의 todo 리스트의 제일 최초의 요소만을 돌려주도록 합니다.

Todo.js

{// 定義と同時にエクスポートもしている}
export default function Todo() {
  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id="todo-0" type="checkbox" defaultChecked={true} />
        <label className="todo-label" htmlFor="todo-0">
          Eat
        </label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">
          Edit <span className="visually-hidden">Eat</span>
        </button>
        <button type="button" className="btn btn__danger">
          Delete <span className="visually-hidden">Eat</span>
        </button>
      </div>
    </li>
  );
}

왜 최초의 요소만인가 하면, id, defaultChecked, value의 값을 제외해 구성이 같기 때문입니다.
완성된 구성 요소를 App.js에서 로드해 봅니다.

App.js

{// todoコンポーネントをインポート}
import Todo from "./components/Todo";

{// ...略}
<ul
  role="list"
  className="todo-list stack-large stack-exception"
  aria-labelledby="list-heading"
>
  <Todo />
  <Todo />
  <Todo />
</ul>
{// ...略}

그러나 이대로는 같은 태스크를 3회 표시해 버리는 것뿐입니다. 각각의 id.defaultChecked,value 의 값을 독특한 것으로 하지 않으면 안됩니다. 그래서 App.js의 부모 컴포넌트인 index.js에 각각의todo를 정의해 버립니다.

index.js

{// ...略}
const DATA = [
  { id: "todo-0", name: "Eat", completed: true },
  { id: "todo-1", name: "Sleep", completed: false },
  { id: "todo-2", name: "Repeat", completed: false }
];
ReactDOM.render(<App tasks={DATA} />, document.getElementById('root'));
{// ...略}

이렇게하면 App.js에서 props.tasks를 사용하여 값을받을 수 있습니다.
하지만, 이것을 그대로 표시해 버리면 아래와 같이 대입한 값이 그대로 표시되어 버립니다. (이름만 표시)

그래서 위의 map() 함수에서 tote 컴포넌트를 반환할 필요도 나옵니다.

App.js

{// ...略}
const taskList = tasks.map(task => (
    <Todo
      id={task.id}
      name={task.name}
      completed={task.completed} 
      key={task.id}
      toggleTaskCompleted={toggleTaskCompleted}
     />
  )
);
{// ...略}

다른 부분도 같은 요령으로 컴퍼넌트화해 갑니다.

끝에

다음 기사에서는 「이벤트」에 대해 복습해 가고 싶습니다.