#queryselector

documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.

<select></select> <select></select> <select></select> ... var targetArr = document.querySelectorAll("select"); var optionArr = [ {CODE_NAME: "one", CODE_ID: 1}, {CODE_NAME: "two", CODE_ID: 2}, ... ]; 이런 환경에서 optionArr을 가지고 모든 select에 option을 넣어주려고 합니다. 기존 소스 : targetArr.forEach(function(target) { optionArr.forEach(function(item) { var option = document.createElement("option") option.setAttribute("value", item.CODE_ID); option.innerText = item.CODE_NAME; target.append(option); }); }); 변경 소스 : var fragment = document.createDocumentFragment(); var option = document.createElement("option"); optionArr.forEach(function(item) { var cloneOption = option.cloneNode(); cloneOption.setAttribute("value", item.CODE_ID); cloneOption.innerText = item.CODE_NAME; fragment.append(cloneOption); }); targetArr.forEach(function(target) { target.append(fragment.cloneNode(true)); }); 이렇게 O(nm)으로 동작하던 기존 소스를 O(n)으로 변경하였고 더하여 직접 DOM을 조작하기 보다 documentFragment를 활용하였으니 더 빨라질 것으로 예상하였으나 더욱 느리게 나오더라구요. cloneNode가 문제인 건지... 이유를 모르겠습니다. 알려주시면 감사하겠습니다.

React와 scss를 사용해서 개발시 style control

React와 scss기반으로 개발시 전체적인 layout과 관련하여 최상위 컴포넌트의 className이나 inline style을 변경해야할 경우에 아래 두 방식중 어떤 것이 좋은 방법일까요?? (1) state(context api) 사용하고 하위 컴포넌트의 전체 재실행 되는 것이 정상이다. (2) querySelector를 통해 직접 DOM 접근하여 하위 컴포넌트의 전체 재실행을 피한다.

리액트에서 closest 써도 컨벤션에 어긋나지 않을까요?

아래처럼 상위 노드를 찾기 위해 이벤트 버블링을 하려고 하는데요.. closest와 querySelector와 같은 메서드를 사용하면 구조에 종속적인 코드가 되기 때문에, 구조에 종속되지 않는 방법을 찾아보는 것이 좋다는 내용을 어디서 봐서 ㅠㅠ 고민이 됩니다. closest를 사용하지 않고 반복문으로 생성되는 컴포넌트마다 onClick 함수를 추가하는 방식이 더 나을까요? 의견 좀 주세여 ㅠㅠ

리액트에서 컴포넌트 직접 접근 후 값 수정하기

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다. 컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.(하늘에서 별이 랜덤으로 반짝 반짝 하듯이) useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값 수정을 못해서요 ㅠㅠ 예를들어 ,바닐라 js에서는 const random = () => Math.floor(Math.random()*99+1) let x =random() let y = random() document.Queryselector().style = “position : absolute; top: “ + x.toString()+”%, left :”+ y.toString()+”%”; 이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!