✍🏻 오늘의 정리 목록

• HTML 데이터셋(Dataset, data-) 속성
• JavaScript Math.random()
• 점수에 맞게 버튼 밝히기

😝 미해결 목록

• 반복되는 export(해결!)

🙆🏻‍♂️ HTML 데이터셋(Dataset, data-) 속성

REACT HOOK인 useRef를 사용해서 DOM에 위치한 같은 요소들의 인덱스를 알아내자니 생각처럼 쉽지않았다. 그래서 발견한 것이 데이터 속성이다. HTML5부터 생겨난 데이터 속성은 특정 데이터를 REACT 요소가 아닌 DOM 요소에 저장하는데 탁월하다.

<div onClick={colorChange} data-num= '1'/>

데이터 속성은 위처럼 'data-'로 시작하고, 이후 명칭은 자유롭게 지정하면 된다. 여기서 나는 'data-num'이라는 명칭으로 데이터를 받았지만, 'data-len, data-number...'등 자유롭게 사용할 수 있다는 말이다.

이렇게 요소에 데이터 속성을 부여해 인덱스 값을 지정하였고, 이후 이벤트 함수를 통해 자유자제로 사용할 수 있었다.

console.log(e.target.dataset) -> DOMStringMap {num: '1'}

아래는 데이터 속성을 통해 돔 요소의 인덱스를 특정할 수 있었고, 이를 통해 CSS 속성을 변경할 수 있었다.

const colorChange = (e) => {
 	const elemNum = e.target.dataset.num;
  	const elemArr = e.target.parentNode.childNodes;

  	for(let j = 0; j < 5; j++){
      elemArr[j].style.backgroundColor = "transparent";
  	}

  	for(let i = 0; i < elemNum; i++){
      elemArr[i].style.backgroundColor = "#64b5f6";
  	}

  dispatch(updateData([choicedDay.choicedDay, elemNum]))
};

🙆🏻‍♂️ JavaScript Math.random()

Math.random()은 0부터 1까지(1 미포함) 구간에서 난수를 생성한다.

1) 0 <= random < 1

Math.random();

2) 0

Math.floor(Math.random());

3) 0 <= random <= 9

Math.floor(Math.random() * 10);

4) 0 <= random <= 10

Math.floor(Math.random() * 11);

5) 0 <= random <= 99

Math.floor(Math.random() * 100);

6) 0 <= random <= 100

Math.floor(Math.random() * 101);

7) 1 <= random <= 10

Math.random() * 10) + 1;

8) 최소값, 최대값 지정

Math.floor(Math.random() * (max - min + 1)) + min

출처: https://hianna.tistory.com/454 [어제 오늘 내일]

🙆🏻‍♂️ 점수에 따른 색깔 주기

const colorChange = (e) => {
 	const elemNum = e.target.dataset.num;
  	const elemArr = e.target.parentNode.childNodes;

  	for(let j = 0; j < 5; j++){
      elemArr[j].style.backgroundColor = "transparent";
  	}

  	for(let i = 0; i < elemNum; i++){
      elemArr[i].style.backgroundColor = "#64b5f6";
  	}

  dispatch(updateData([choicedDay.choicedDay, elemNum]))
};

위 방식은 데이터 속성값을 통해 DOM 요소에 인덱스를 주고 for문을 이용해 CSS 속성을 주는 코드이다. 그리고 마지막에는 해당 인덱스 값을 별점으로 간주해 dispatch해주었다.

그럼 업데이트된 별점에 따라 색상을 밝혀주는 방법은 없을까 생각해봤다.

const rank = () => {
        const rank = day_list.filter(v => v.day === choicedDay.choicedDay).shift().rank;
        return rank
}

먼저 filter 메소드를 사용해 해당 요일의 요소를 취했다. 만약 월요일의 평점 3을 업데이트 해주었다면, 해당 state값은 {day: "월요일", rank: 3}일 것이다.

<Rate rank={rank}>
  <div onClick={colorChange} data-num= '1'/>
  <div onClick={colorChange} data-num= '2'/>
  <div onClick={colorChange} data-num= '3'/>
  <div onClick={colorChange} data-num= '4'/>
  <div onClick={colorChange} data-num= '5'/>
</Rate>

👉 return 내에서는 for문이 안먹히는데 저런 하드코딩보다 더 나은 방법은 없을까?

props로 rank의 값을 내려주었고,

& > div:nth-child(-n+${props => props.rank}){
        background-color: #64b5f6;
    }

해당 값을 받아 속성을 적용해주었다.

🤦🏻‍♂️ export

	// 현재 요일에 맞게 day_list를 재배열
	const day_list = useSelector(state => state.data.list)
    const getDay = new Date().getDay()
    const newArr = () => {
        if(getDay !== 0) day_list.push(...day_list.splice(0, getDay));   
    }
    newArr();

현재 요일에 맞게 재배열하는 코드를 구현했다.
하지만 다른 컴포턴트를 들렸다 다시 돌아오면 또 다시 export되기때문에 저 코드가 또 실행이 된다.
딱 한 번 만 실행되게하는 방법은 없을까?

이거는 조건문으로 도출된 요일 배열이 아니다.
몇번이고 반복되어도 정해진 배열을 도출해내는 것이 관건이다.

// 현재 요일에 맞게 day_list를 재배열
    const week_day = day_list.map((v) => {
        const getDay = new Date().getDay();
        const num = getDay + v.id > 6 ? getDay + v.id - 7 : getDay + v.id;
        return day_list[num]
    })

getDay()는 0-6까지의 정수 값을 도출한다. 이는 7진법이라 생각하고 7이상이 되면 다시 0부터 시작하겠금 조건문을 작성해주면된다. 이처럼 작성하면 몇번이고 컴포넌트가 export돼도 요일 배열은 바뀌지 않을 것이다.