[TDL] 07/29 Today's-Done-List

- 제로베이스 REACT 강의

리액트 주요 개념 마무리 + 컴포넌트 스타일링

데이터를 가져와서 컴포넌트에 뿌려줄 때, reduce를 이용해볼 수 있다.
react 공식 문서의 mock data를 사용해보자.

filter함수를 사용해서 카테고리가 Sporting Goods 이거나 Electronics 일 경우의 데이터만 뽑아 올 수도 있지만,
그렇게 데이터를 추출한다면 만약 Sporting Goods 또는 Electronics가 없을 경우, 사용이 불가능하다.
즉, 코드의 확장성이 좋지 않으므로 reduce를 이용해서 어떤 카테고리가 나타나더라도 사용 가능할 수 있도록 구현해보자.

import React from "react";
import products from "./products"

export default function FilterableProductTable() {
	const result = products.reduce((acc, cur) => {
		if (acc.hasOwnProperty(cur.category)) {
			return {
				...acc,
				[cur.category]: [...acc[cur.category], cur],
			};
		} else {
			return {
				...acc,
				[cur.category]: [cur],
			};
		}
	}, {});

	console.log(result);
	return <div></div>;
}

공식문서에서 가져온 데이터는 products이며, 다른 파일에 저장하여 import 하였다.

• 만약 이전(acc)의 property가 현재(cur)의 카테고리를 갖고 있을 경우,
  if문에서 리턴을 해주고, 그렇지 않을 경우에는 else 문에서 리턴을 돌린다.
• 카테고리를 갖고 있을 경우에는 
  ...acc : 전체 데이터를 받아오고,
  [cur.category] : 현재의 카테고리를 받아오고,
  [...acc [cur.category], cur] : 받아온 현재 카테고리와 현재의 객체를 대입한다.
  
  
• 카테고리를 갖고  있지 않을 경우에는
  ...acc : 전체 데이터를 받아오고,
  [cur.category] : 현재의 카테고리에
  [cur] : 현재의 데이터를 대입한다.

그렇게 해서 콘솔을 찍어보니 데이터가 잘 가공된 것을 볼 수 있다.

---

이제 해당 result 데이터를 다른 컴포넌트에서 props로 받아서, 화면에 뿌려줘야 하는데
현재 카테고리가 여러 개로 나뉘어있어서 자식 컴포넌트에 건네주기가 애매하다.
그럴 경우, 카테고리의 이름들을 받아와서 각 카테고리에 맞는 객체들을 map 돌려주면 된다.

const categories = Object.keys(result);

return (
    <>
        {categories.map((key, idx) => (
            <ProductTable key={idx} category={key} items={result[key]} />
        ))}
    </>
);

import React from "react";

export default function ProductTable(props) {
	console.log(props);
	return <></>;
}

그리고, props로 받은 컴포넌트에서 콘솔을 찍어보면 잘 받아지는 것을 볼 수 있다.

---

나머지는 이제 뿌려주기만 하면 된다. category 뿌려주고, items는 또 한 번 map 돌리기.

import React from "react";

export default function ProductTable(props) {
  return (
    <>
      <table>
        <thead>
          <tr>
            <td>{props.category}</td>
          </tr>
        </thead>
        <tbody>
          {props.items.map((item, idx) => (
            <tr key={idx}>
              <td>{item.name}</td>
              <td>{item.price}</td>
            </tr>
           ))}
        </tbody>
      </table>
    </>
  );
}

---

---

https://2021.stateofcss.com/ko-KR/technologies/css-in-js

The State of CSS 2021: CSS-in-JS

---

오후 회고 (만족도: 6.5)

오전에 더 일찍 일어나야 목표한 것들을 다 달성할 텐데ㅠ
오전에 못 일어나니깐오후 파트에 오전 계획부터 학습하느라 목표를 달성하지 못해서 아쉽다.
다음 주부터는 오전에 두 시간 정도만이라도  할 수 있도록 노력해보자.

---

- 1분코딩 html5 canvas 강의

canvas 강의

---

저녁 회고 (만족도: 6)

오늘 canvas 유튜브 학습 마무리 지으려고 했는데 생각보다 양이 더 많아서, 아마 일요일에 한번 더 들어야 할 것 같음.
그래도 강의 들으면서 제로베이스에서 배웠던 기능들도 복습이 되고, 새로운 것도 배우고 나름 재미있다.
유튜브 강의를 다 들으면 아직 끝내지 못한 제로베이스의 canvas 프로젝트들을 저녁 파트에 2-3시간 동안만 학습하는 것도 괜찮은 계획 같아서 고민 중이다.

---

[ 출처 : zerobase frontendSchool React 이론 ]