IT/react33 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. 이전 1 ··· 3 4 5 6 다음
