react7 [react] text-overflow: ellipsis 활성 여부 react code에서 확인하는 방법 개발하다보면, 문구 줄임 여부에 따라 '더보기' 버튼을 노출를 결정할 때 있다. 이때 CSS에서 계산된 값을 JS에서 확인해야 하므로 어떻게 확인할 수 있는지 알아보자 샘플코드const ref = useRef(null)const isEllipsis = ref.current.clientWidth >= ref.current.scrollWidthreturn ( hello world {isEllipsis && 더보기} ) 개념scrollWidth보이는것과 상관없이 컨텐츠가 가지고 있는 영역 clientWidth보이는 부분에서 컨첸츠가 가지고 있는 영역 2024. 11. 20. React - useImperativeHandle 개념 잡기 useImperativeHandle에 대해 알아보자 딱봐서는 어떤 기능을 하는지 짐작하긴 힘들다. Imperative에 대해 사전적 의미부터 살펴보자 Imperative 뜻은 '반드시 해야 하는' , '위엄 있는', '긴요한 것'으로 해석된다. 이런 뜻을 인지하면서 해당 hook이 어떤 기능을 하는지 알아보자 개념 `forwardRef`로 넘어간 ref instance를 이용하여 자식 컴포넌트 내의 기능을 부모 컴포넌트에서 직접 사용하고 싶을 때 사용하는 hook입니다. 예시 App 컴포넌트 App 컴포넌트는 부모 컴포넌트이고 MyInput 컴포넌트는 하위 컴포넌트 입니다. App 컴포넌트에서 ref값을 선언할때 어떤 기능을 담당하는지 Generic Type을 정의합니다. MyInput 컴포넌트에 ref.. 2023. 10. 12. React - Ref 에러 잡기 에러 문구 client.js:1 Warning: React does not recognize the videoRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase videoref instead. If you accidentally passed it from a parent component, remove it from the DOM element. 원인 useRef의 변수를 자식 컴포넌트의 prop으로 넘길 때 videoRef라는 속성으로 넘겨서 생긴 이슈 해결 방법 해당 자식 컴포넌트를 fowardRef로 감싸고, ref속성으로 videoR.. 2023. 6. 18. React component, preload 로 최적화 하기 하려는 것 dynamic import로 적절한 시기에 preload 하여 불필요한 스크립트 로드를 죄소화해보자 적절한 시기란 - 버튼을 클릭 하기 전. 즉 버튼을 hover 했을 때 (로드할 스크립트 커서 생각보다 느리다면 비 추천) - 컴포넌트가 마운트 된 이후 즉, 로딩을 최대한 늦추는 것이 목적 hover 되었을 때 onMouseEnter function 컴포넌트가 마운트 된 이후 useEffect(() => { // 여기서 dynamic import }, []) 2023. 5. 27. Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 5. 27. Headless Component 개념 기능은 있지만 스타일이 없는 컴포넌트 도입이 필요한 이유 기능과 스타일이 공존한 컴포넌트는 재사용하기가 어렵다. 기능 추가하려니 스타일이 깨지고, 스타일을 추가하려다보니 기존 UI에 side-effect가 생긴다. 그래서 비슷한 컴포넌트를 계속 만들게 되는데.. 이는 변경이 빈번하는 프로젝트에서는 적합하지 않다. 컴포넌트를 기능만 담당하는 것만 하나 만들어서 각자 다른 스타일을 입혀 재사용이 가능한 컴포넌트를 만드는것이 좋겠다. How 인터페이스 먼저 고민하기 의도가 무엇인가? 이 컴포넌트의 기능은 무엇인가? 어떻게 표현되어야 하는가? 분리하기 복잡도를 낮추는가? 재사용 가능한 컴포넌트가 만들어지는가? 구현 custom hook context Headless UI Library https://hea.. 2023. 5. 27. 이전 1 2 다음
