(react) 반복작업 줄이기

지금까지 만든 코드는 각 prop의 값만 다르고 반복적이기 때문에 javascript의 iteration을 이용해서 코드를 정리해줄 수 있음~

코드의 다른 부분은 객체 배열을 사용해서 데이터를 만들어줌.

const DATA = [
  { id: "todo-0", name: "Eat", completed: true },
  { id: "todo-1", name: "Sleep", completed: false },
  { id: "todo-2", name: "Repeat", completed: false },
];

 

 

그리고 DATA를 <App />에 tast라는 prop으로 전달해주는데, src/main.jsx 내부에서 <App /> 구성 요소 호출을 아래 코드와 같이 업데이트 해줌. DATA 배열은 이제 App 구성 요소 내부에서 props.tasks로 사용할 수 있음.

<App tasks={DATA} />

 

 

반복을 통한 렌더링

객체 배열을 렌더링하려면 <Todo /> 구성 요소로 변환하기 위해 Array.prototype.map() 메서드를 이용함.

App()의 return문에 taskList라는 변수를 만들고, props.tasks 배열의 할 일을 name으로 변환해봄~

const taskList = props.tasks?.map((task) => task.name);

 

 

<ul>의 모든 자식요소를 taskList로 바꿔보면, 

 

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

 

 

누락된 <li>와 체크박스 및 버튼을 만들어주기 위해 map() 함숫에서 <Todo /> 컴포넌트를 반환하는 코드를 만들어 줌.

const taskList = props.tasks.map((task) => <Todo />);

 

 

이게 아래와 같이 <Todo /> 컴포넌트에 전달하는 id, name, completed 속성을 적어줌

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