[프리온보딩] 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은 작은 사각형