[TIL] 2022/01/15 Sat -

 

 

 

 

Today I Learned

 

 

오늘은 axios로 서버에서 데이터를 받아와서 통계 탭에 출력해주는 작업과

프로그래머스 알고리즘 문제를 풀었다.

 

비록 레벨 1이지만 카카오 문제를 내 힘으로 풀었다!

머릿속으로는 접근 방법이 안 떠올라서 손으로 그림을 그리면서 풀었더니 순서에 대한 감이 잡혔고,

스터디 시작 1분 남은 시점에서 다행히 모두 통과할 수 있었다.

 

그리고 서버에서 데이터 받아 온 데이터 중 랭킹 데이터가 있는데,

어차피 등록한 사전 수를 기준으로 내림차순으로 정렬한 리스트로 받는 거라

순위는 안 받고 리스트의 index에 +1을 연산해서 화면에 출력하려고 했는데 작은 문제가 생겼다.

 

부모 컴포넌트에서 리스트에 map 메소드를 사용해서 자식 컴포넌트에 하나의 랭크에 대한 데이터를 넘겨주는데,

index가 1, 2일 때는 더하기 연산이 잘 적용돼서 2, 3으로 잘 출력되지만 0일 때만 더하기 연산이 안 되고 그대로 0으로 출력되었다.

 

/* OneRankCard.js */

const OneRankCard = ({ rank, index }) => {
  console.log(index)
  return (
    <>
      <OneRankBox>
      	/* 문제의 코드 */
        <div className="rank">{index && index + 1}</div>
        <Grid flex_center column>
          <ProfileImage src={rank?.profileImage} />
          <div className="rank-nickname">{rank?.nickname}</div>
        </Grid>
        <div className="rank-dict-qty">
          <span className="highlight">{rank?.postCount}개</span> 등록했어요!
        </div>
      </OneRankBox>
    </>
  )
}

 

 

근데 또 콘솔에는 인덱스가 0, 1, 2 로 잘 찍힌다.

 

 

아직도 원인을 찾지 못해서 임시방편으로 순위를 출력하는 코드를 아래와 같이 수정했다.

 

/* 삼항연산자로 index가 0일 때는 1로 출력, 그 외에는 index + 1로 출력 */

<div className="rank">{index && index === 0 ? '1' : index + 1}</div>

 

 

 

index 0에는 뭔가 다른 속성이 있는 걸까..?