치춘짱베리굿나이스
[프리온보딩] 220527 그룹과제 #4 본문
그룹과제 #4
공식적인 내생각
과제에서 제공되는 데이터가… 아주.. 매우 복잡해서 컴포넌트를 재활용할 수 없는 상황에 직면한지라 과제 데이터를 개조했다
객체배열로 개조하니까 해결됐다 스타일까지 적용하니 할일이 모두 끝났다 개인과제를 열심히 두들길 시간이군
작업 내용
커스텀 훅으로 데이터 정제하기
useEffect(() => {
if (!healthData) return
setMyData([
{
title: '체질량지수',
...
detail: healthData.wxcResultMap.boj.resBMI,
},
...
])}, [healthData])
return { myData }
데이터 정제하는 함수는 만들고 싶고 함수내에서 useState
나 useRecoil*
은 못쓰고 그와중에 전역 데이터는 필요하고… 그래서 커스텀 훅으로 만들었다
훅 안에서 useRecoilValue
로 데이터를 통짜로 불러온 뒤 (여러 컴포넌트에서 데이터를 나눠써야하니 JSON 데이터를 그냥 전역에 저장해버렸다) useEffect
에서 데이터 불러오기에 성공했다면 하나씩 정제해서 배열로 만들어주었다
ppt 안에 들어있는 데이터도 다 가져와서 사용했다 이것도 JSON 안에 포함시켰어도 되지 않았을까? 라는 생각이 많이 들긴 한다…
객체 key 접근으로 컴포넌트 다르게 가져오기
const svgIcon = {
체질량지수: <BMIIcon />,
혈압: <BloodPressureIcon />,
총콜레스테롤: <CholesterolIcon />,
흡연: <SmokeIcon />,
식전혈당: <BloodSugarIcon />,
음주: <AlcoholIcon />,
신사구체여과율: <GFRIcon />,
운동량: <ExerciseIcon />,
}[title]
...
<div className={styles.topIconSectionTop}>
<h3>{`0${index}`}</h3>
{svgIcon}
</div>
저번 강의때 기억에 남아 아주 유용하게 쓰고 있다
이 방법을 몰랐으면 switch
case
나 8중 if
문으로 장황하게 쓰고 있었겠지
기타
letter-spacing
으로 자간 조절 가능list-style
속성값disc
는 검은 원,circle
은 속이 빈 원,square
은 작은 사각형
'프로젝트 > 원티드 프리온보딩' 카테고리의 다른 글
[프리온보딩] 220530 - 그룹과제 #4, 개인과제 #2 (0) | 2022.05.31 |
---|---|
[프리온보딩] 220529 그룹과제 #4, 개인과제 (0) | 2022.05.30 |
[프리온보딩] 220526 그룹과제 #3 종료 + 그룹과제 #4 (0) | 2022.05.27 |
[프리온보딩] 220525 그룹과제 #3 (0) | 2022.05.26 |
[프리온보딩] 220524 그룹과제 #3 (0) | 2022.05.25 |
Comments