[Wecode 61일차] css 우선순위, line style function call, react-range

1. 러시아 형님이 만든 리액트 완전 유지보수 꽝으로 해놓았다.

 

   리팩토링하는 과정에서 어떻게 하면 쉽게 관리할 수 있을까 고민하다가. 주어진 조건에서 최적안을 찾았다.

 

   inline style에 function call 을 하는 것.

 

   클래스밖에다가 분기에 따른 함수를 만들어놓고

const setBackground = title => {
	if(title === "ROLL UNDER"){
		return ROLL_UNDER;
	}else if(title === "PAYOUT"){
		return PAYOUT;
	}else{
		return WIN_CHANCE;
	}
};

static generateCell = (title, value) => (<div className="main-block">
<div className="cell cell-title"
style={{ background : `url(${setBackground(title)})` ,
backgroundPosition :"center",
backgroundSize : "100% 100%"
}}>{title}</div>
        <div className="cell-space" />
<div
className={"cell cell-value"}><div className={`${title === 'ROLL UNDER' ? 'arrow' : ''}`}>{value}</div></div>
</div>);

위와 같이 inline 스타일안에 함수로 불러왔다.

 

러시아 형님이 inline css 와 css file 을 만들었는데... 

 

우선순위도 따져야한다.  둘중에 inline이 먼저 적용된다.

 

나는 백그라운드로 이미지 넣을 경우, 백그라운드 포지션값과, 사이즈값을 줘야 정상적으로 보여지는데,

 

이미 인라인으로 넣어버렸고, 포지션값, 사이즈값은 css file로 작성했는데, 적용되지 않았다.

 

따라서, 우선순위가 무엇인지 검색해보았고, 우선순위를 찾았다.

 

2. react-range 라이브러리

프로그래스바 처럼 사용할 수 있는 라이브러리이다.

getTrackBackground()로 바 모양을 커스텀 가능하며, 그라데이션도 줄 수 있다.

나중에 한번 제대로 사용해봐야겠다.