(react) 컴포넌트 만들기4

어제 map() 함수를 사용해서 코드가 반복되는 부분을 줄여본 후 페이지는 위 캡쳐와 같이 잘 나옴~

이제 React는 배열에서 데이터를 렌더링하기 때문에 <Todo /> 컴포넌트에 key prop을 전달하여 식별할 수 있음. 키는 유니크하게 사용되어야 하는데, key는 이미 React가 관리하는 prop이기 때문에 각 task의 id값을 키로 재사용해야 하면 됨. 참고로 React에서는 반복문으로 렌더링하는 것은 모두 유니크한 키를 전달해야 한다고 함~

 

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

 

 

 

나머지 부분들 모두 컴포넌트로 만들기

<Form />, <FilterButton /> 등 남은 부분들도 컴포넌트로 변경 작업을 해줘야 함~ 터미널을 열고 아래 명령어 실행

 

#방법 1
touch src/components/{Form,FilterButton}.jsx

#방법 2
touch src/components/Form.jsx src/components/FilterButton.jsx

#윈도우의 경우 echo명령어 등을 사용

 

 

이제 components/Form.jsx를 열어서 Form() 함수를 선언하고 파일 끝에 내보낸 후 App.jsx 내부에서 <form> 태그영역을  Form()의 return문 안에 복붙해줌.

 

function Form() {
  return (
    <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>
  );
}

export default Form;

 

 

또 Form.jsx에서 작업한 것처럼 FilterButton.jsx을 열고 App.jsx의 <div className="filters btn-group stack-exception"> 내부의 첫 번째 버튼에 대한 내용을 FilterButton()함수의 return 문으로 복붙~

 

function FilterButton() {
  return (
    <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>
    </button>
  );
}

export default FilterButton;

 

 

 

지금까지 만들 모든 구성요소를 App.jsx의 맨 위에 아래 코드와 같이 import를 추가한 후 App()의 return문을 업데이트해서 구성 요소를 렌더링 해줌. 아래는 지금까지 완료된 App.jsx 

import Form from "./components/Form";
import FilterButton from "./components/FilterButton";
import Todo from "./components/Todo";

function App(props) {
  const taskList = props.tasks?.map((task) => (
    <Todo
      id={task.id}
      name={task.name}
      completed={task.completed}
      key={task.id}
    />
  ));
  return (
    <div className="todoapp stack-large">
      <h1>TodoMatic</h1>
      <Form />
      <div className="filters btn-group stack-exception">
        <FilterButton />
        <FilterButton />
        <FilterButton />
      </div>
      <h2 id="list-heading">3 tasks remaining</h2>
      <ul
        role="list"
        className="todo-list stack-large stack-exception"
        aria-labelledby="list-heading">
        {taskList}
      </ul>
    </div>
  );
}

export default App;