동적 데이터요소 style 주기

갑자기 왜 이걸 하게 된거지?

어쩌다보니 데이터가 동적으로 5개 , 7개 몇개가 들어오는지 알 수 없을 경우 몇개가 들어올지 알수없는 데이터에 css 를 먹이고 싶었다.

그런 방법을 생각해보다가 다음과 같은 로직을 짰다.

 

https://codesandbox.io/s/lively-currying-71lfgc?file=/src/App.js 

lively-currying-71lfgc - CodeSandbox

 

데이터 배열에서 랜덤으로 3개 뽑은 배열을 map 함수 돌려서 index로 querySelector 로 DOM 을 얻어서 style을 먹이는 것이다.

  random.map((el) => { 
    const target = document.querySelector(`.App :nth-child(${el})`);
    target.style.color = "red";
  });

 

오호라..