반응형 전체 글601 onClick과 onMousedown의 차이 onClick과 onMousedown의 차이 react test 코드 만드는것을 연습하면서 혼자 select box를 만들다 예전에 작성한 이 글을 참고하게 되었다. TIL : onBlur때문에 onClick이 실행되지 않을 땐, onMouseDown을 사용 setVisibleUlTag(!visibleUlTag)} onBlur = {()=>setVisibleUlTag(false)} > n개씩보기 {visibleUlTag ? {array.map(el)=> n개씩보기} : null} button클릭 li태그 노출 li태그 클릭시 onClick이 실행되기 전에 button태그의 onBlur가 실행되 wnsdufdl.tistory.com 궁금해졌다. 왜 onMousedown에 list click event를 할.. 2023. 11. 21. zustand에서 functional update가 가능한 setState만들기 useState의 setState는 다음과 같이 이전값을 통한 functional update가 가능하다. setIcons(prev => { const updatedIcons = prev.map(i => { if (i.id === icon.id) { return { ...i, alt: e.target.value }; } return i; }); return updatedIcons; }); state를 전역으로 관리하기 위해 zustand를 이용할때가 있는데, 지금까지는 zustand에서 setState를 다음과 같이 만들었었다. import { IconType } from '@/components/Icon'; import { create } from 'zustand'; interface UnderbarS.. 2023. 11. 6. img srcset과 size srcset에서 w나 x등의 디스크립터는 정확히 말하면 이미지의 실제 규격과 관련된 것이다. 개발자가 반응형 break-point로 사용하기 위해 어찌저찌 할 수 있는 것이 아니다. 즉, srcset의 디스크립터를 view port와 연관지어 생각하면 안된다. srcset의 목적은 브라우저에게 이미지의 정보를 알려주고 '브라우저 니가 알아서 선택해' 라고 선택권을 주는 것이다. 개발자가 break-point를 명시하여 반응형으로 렌더링하려면 css media query나 img태그의 size속성을 이용하면 된다. 그러면 정해진 break-point내에서 브라우저가 srcset속성을 참고하여 최적의 이미지파일을 선택하여 렌더링한다. srcset에서 최적의 이미지를 선택하는 기준은 브라우저의 캐시,네트워크 .. 2023. 10. 14. JSX문법에서 단일 root 태그로 래핑해야 하는 이유 JSX문법에서 단일 root 태그로 래핑해야 하는 이유 공식문서에는 이렇게 나온다 JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 두 객체를 배열로 래핑하지 않고는 함수에서 두 객체를 반환할 수 없습니다. 이는 두 개의 JSX 태그를 다른 태그나 Fragment로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다. 잘 이해가 안가서 chatGPT한테 물어봤다. function MyComponent() { return ( jj hhhi ); } 위 JSX 코드가 JS 객체로 변환되면 다음과 같다. { type: 'div', props: { children: [ { type: 'div', props: { children: [ { type: 'span', props: {.. 2023. 10. 14. 이전 1 ··· 15 16 17 18 19 20 21 ··· 151 다음 반응형
