✍🏻 本日の整理目録

HTMLデータセット属性

JavaScript Math.random()

分表示ボタン

を押す.

😝 未解決のリスト

繰り返し出口(解決!)

🙆🏻‍♂️ HTMLデータセット(DataSet,data-)プロパティ

REACT HOOK userefを使用してDOMにある同じ要素のインデックスを検索するのは、思ったほど簡単ではありません.データ属性が見つかりましたHTML 5から生成されるデータ属性は、RECT要素ではなく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 < 1Math.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属性のコードを提供する.次に、最後にインデックス値をアスタリスクとして割り当てます.
では、更新されたスコアに基づいて色を点灯させる方法はありますか?

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();

現在週ごとに並べ替えられているコードを体現しています.
ただし、別のコンポーネントが聞こえて戻ってくると再エクスポートされるため、コードは再実行されます.
一度だけ実行させる方法はありますか?
これは条件文がエクスポートした曜日配列ではありません.
何度でも繰り返しても、決まった配列を見つけることがポイントです.

// 현재 요일에 맞게 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から条件文を書けばいいのです.このように書くと、何度も素子を導出しても曜日の並びは変わりません.