[React] Coin Tracker - 값 양수, 음수 색상 다르게 나타내기

 

구현하게 된 이유?

노마드코더 챌린지를 도전하던 중에 주식이나 코인 앱에서 보이듯이 가격이 올라가면 빨간색으로 내려가면 파란색으로 표시를 해보고 싶어졌다.
어떤 방법을 쓰면 좋을지 구글링을 해보다가 적절한 방법이 없어서 고민하던 중 slack 채팅방에 나와 비슷한 고민을 하던 사람이 질문글을 올렸고, 어떤 분이 Math.sign을 활용하면 될 것 같다는 의견을 주셔서 바로 적용해보았다.
하지만 언제나 그렇듯 한 번에 성공하진 못했고😥 어떤 실패를 했었는지, 결국 어떻게 구현했는지 기록해보려고 한다.

 

Math.sign( ) ❓

 주어진 수의 부호(+/-)를 반환해주는 함수. 단 제공한 수가 0이라면 +0/-0을 반환한다.

• 값이 양수 : 1을 반환
• 값이 음수 : -1을 반환
• 값이 양의 0 : 0을 반환
• 값이 음의 0 : -0을 반환
• 이외의 경우 NaN을 반환

예시 코드

console.log(Math.sign(3));	// 1
console.log(Math.sign(-5));	// -1
console.log(Math.sign(0));	// 0
console.log(Math.sign('-3')	// -1

👉🏻 위의 예시처럼 Math.sign(x) 안의 x가 숫자가 아니어도 자동으로 변환되어 부호를 판단해준다.

출처 : mdn페이지

 

실패 과정 😖

처음에는 답변에서 본 방법처럼 api로 받아 온 색상을 구분해야 하는 가격 값을 Math.sign으로 감싸고 앞에 !! 연산자를 통해서 true, false를 나누어 styled-component에 전달해주려고 했다.

!!(Math.sign(판단 값));

그런데 막상 해보니까 값들의 색이 전부 양수일 때의 색상인 빨간색으로만 나왔다.😰

뭔가 이상해서 값을 콘솔에 찍어보니 상승 가격은 +1로 판단되어 true로 잘 나오는데, 하락 가격은 -1로 판단되지만 -1 또한 true이므로 true / false 구분이 되지 않았다.
그러니 당연하게도 상승, 하락 모두 빨간색으로만 나왔던 것이다. 이 방법 말고 다른 방법을 써야 했다.

두 번째로는 음수일 경우에는 +1을 더해서 0을 만든 후 false로 반환하면 되지 않을까라고 생각해봤는데, 일단 값이 음수인 경우를 판단하는 과정에다가 다시 +1을 추가하는 과정을 만드는 것은 코드가 너무 길어져서 효율적이지 못하다는 판단이 들었다.

 

최종 적용 방법 👀

값의 음수 양수 여부는 그대로 Math.sign( )으로 판별하게 하고, 대신 checkBoolean함수를 만들어 각 숫자 값을 isPositive라는 속성이 true or false를 반환하도록 만들었다.
- 값이 1이면 그대로 true
- 값이 1 이외의 값 (-1, 0)이면 false
마지막으로 styled-component를 통해서 props의 값을 isPositive에 따라 다른 색으로 나타낼 수 있도록 설정해주었다.

// styled component 적용
const PriceValue = styled.span<IItemProps>`
  color: ${(props) =>
    props.isPositive ? props.theme.upwardColor : props.theme.downwardColor};
`;

// checkBoolean 함수
function checkBoolean(value: number) {
  if (Math.sign(value) === 1) {
    return true;
  } 
  else {
    return false;
  }
}

// 값 판단하기
<PriceValue
  isPositive={checkBoolean(BaseUrl.percent_change_30m)}
>
	{`${BaseUrl.percent_change_30m} %`}
</PriceValue>

이제 정상적으로 적용된다!!🙊
아마 더 나은 방법이 있을 수도 있지만, 지금 알고 있는 지식으로는 이 방법이 최선인 듯하다.
나중에 더 나은 방법을 알게 된다면 따로 포스팅해야겠다.