[TIL/React] 2023/09/11

시작에 앞서... 🟢

학교를 다니고 종강 이후에는 일을 하는, '바쁘다 바빠 현대사회'를 몸소 체험하고 있다. 그런데 매번 상황이 바뀔 때마다 초반에 정신을 못 차린다는 느낌을 받았다. 10번째의 myTask가 계속 주어지고 process라는 함수로 실행은 하는데, 해당 함수의 로직이 명확하지 않았기 때문이라고 판단했다. ~~애초에 함수가 없었다고 봄이 솔직할 성싶다.~~

딥다이브 읽기와 프로젝트 구현을 예시로 해당 함수를 적용 해봤다. 예시다.

1. ✎ 과업의 정량화가 가능한가? 딥다이브, 정량화 O - 페이지를 정할 수 있음 프로젝트 구현, 가끔 정량화 X - validation처럼 처음 접하는 개념에 대해서는 구글링(=조사) 과정이 필요하기에 정량화가 어려움

2. ✎ 딥다이브: p.1(=starting point), p.7(어디까지)

3. ✎ validation 조사: what is validation 검색(=starting point), 30분간 양질의 자료 빡세게 찾기(얼마간)

4. ✎ 부족한점 딥다이브: 이해 안 되는 개념 등장 프로젝트: 자료 발견 x 또는 적용이 안 됨

5. ✎ task로 할당할 수 있는 것 딥다이브: 모르는 개념 찾아보기(=정량화 X 작업으로 바뀔 수 있다) 프로젝트: 적용의 최소 단위 설정하기(=정량화 O 작업으로 바뀔 수 있다)

모든 task에 완벽히 적용되지는 않겠지만, 기본적으로 위 process를 따르도록 하자.

myTask: 쇼핑 페이지 중 '소' 카테고리 데이터 만들기 🟡

1. 정량화 가능. 단, 데이터가 너무 많아서 10개로 한정 2. 시작점은 '한우 등심 구이용' 데이터 구조 만들기, '무항생제 한우 안심 스테이크용' 데이터까지 3. 정량화 가능하기에 3번은 생략

카테고리 버튼을 클릭하면 onClick으로 연결되어 있는 handleSetCategory 함수에 의해, elem의 category를 해당 함수로 전달한다. '소' 버튼을 클릭하면 '소'가 전달되겠다.

함수 내부에서는 setCategory 함수를 통해 category 상태를 '소'로 변경한다. shoppingData[category]는 변수로서 접근하겠다는 의미다. 따라서 shoppingCategory_Beef 배열이 곧 MapData가 된다. 이후 CommonCard라는 카트 형식으로 데이터가 UI로서 렌더링된다.

~~나머지는 사실상 노가다... 빨리 하자!~~

+) 추가

전체 카테고리에 대한 카드 처리를 완료했다. 추가적으로 무항생제 제품에 대해서는 border 컬러에 aqua가 적용되도록 코드를 변경했다. styled component에 props를 전달하는 방식으로 처리했다.

오늘 진짜 끝!