React37 콜백 ref 사용하기 function MeasureExample() { const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node !== null) { setHeight(node.getBoundingClientRect().height); } }, []); return ( Hello, world The above header is {Math.round(height)}px tall ); } reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node Hooks FAQ – React A JavaScript library for building user interfaces reac.. 2020. 12. 14. map 한번만 렌더링하기 : useMemo const map = useMemo(() => { array.map((el, i) => { return ( ); }); }, [array]); return ( {map} ) 2020. 12. 8. 컴포넌트 width 구하기 const slideWidth = slideRef && slideRef.current && slideRef.current.offsetWidth; 2020. 12. 7. [React] 요소에 style 속성 추가 const mystyles = { position: 'absolute', } as React.CSSProperties; not working stackoverflow.com/questions/46710747/type-string-is-not-assignable-to-type-inherit-initial-unset-fixe 2020. 11. 25. React Slider 라이브러리 openbase.io/packages/top-react-carousel-libraries Top 10 React Carousel Libraries in 2020 | Openbase A comparison of the top React Carousel Libraries: react-slick, nuka-carousel, react-image-gallery, react-images, react-swipe, and more openbase.io 2020. 11. 10. styled component로 props 주기 콜백 형식으로 값을 전달해야한다. ({title}) => /*title이 있으면*/ title 반환 export const Title = styled.div` width: ${({title}) => title.length}00%; `; 2020. 11. 10. [Hooks] 4 : useCallback 일반 함수는 컴포넌트가 리렌더링 될때마다 새로 생성된다. useCallback은 함수를 재사용하여 렌더링을 최적화할 때 사용한다. 기본형태 : useCallback(function, deps) deps: 검사할 값이 담긴 배열 const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], // deps ); 함수 안에서 사용하는 상태값이나 props가 있다면 꼭 deps 안에 넣어줘야 해당 값을 최신 값으로 사용하게 된다. react.vlpt.us/basic/18-useCallback.html 18. useCallback 를 사용하여 함수 재사용하기 · GitBook 18. useCallback 을 사용하여 함수 재사용하기 useC.. 2020. 11. 3. React 컴포넌트 특정 영역 외 클릭 감지 const mymenuRef = useRef(null); function closeMyMenuOnOutside(ref: any) { useEffect(() => { function handleClickOutside(e: any): void { if (ref.current && !ref.current.contains(e.target)) { closeMyMenu(myMenuDispatch); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [ref]); } closeMyMenuOnOutside(.. 2020. 10. 19. styled-components 라이브러리 만들기 // style.ts const mt = (size: number) => css` margin-top: ${size}px; `; const mr = (size: number) => css` margin-right: ${size}px; `; const mb = (size: number) => css` margin-bottom: ${size}px; `; const ml = (size: number) => css` margin-left: ${size}px; `; export const Style = { margin: { mt, mr, mb, ml, }, }; // styled-components import { Style } from '../' .mb-0 { input { ${Style.margin.mb(0).. 2020. 10. 16. 이전 1 2 3 4 5 다음
