IT/react33 React - Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 6. 23. React - How to wrap a component 첫번째 방법 const getWrapper = (hideFooter: boolean) => { if (hideFooter) { return Layout } else { return Fragment } } const Wrapper = getWrapper(false) return ( ... ) 두번째 방법 function Wrapper({ children, hideFooter }: { children: ReactNode; hideFooter: boolean }) { if (hideFooter) { return {children} } return {children} } return 2023. 6. 23. React - useEffect vs useLayoutEffect useEffect 언제 어떻게 동작하나? 아래의 이미지를 보면, background color를 설정하는 로직이 browser painting 이후에 이루어 지고, 배경 색깔이 변경된다. 그러므로, 깜빡이는 현상이 보일 수 있다. 물론 아래의 예제에서는 직접 깜박이는 현상을 발견하진 않지만, 무거운 로직을 다룰 경우에 깜빡이는 현상이 있을 수 있다. DOM을 직접 변경해야 할때는 useEffect가 효율적이진 않다. Timeline Component Renders > React starts the DOM changes > Browser Painting > useEffect function runs useLayoutEffect 언제 어떻게 동작하나? Browser Painting이 시작되기 전에 useLa.. 2023. 6. 23. React - useCallback, useMemo 제대로 사용하자 들어가기 앞서 아래의 링크를 자세히 읽어보는 것을 추천한다. useCallback vs useMemo So when should I useMemo and useCallback? 요약 referential equality가 핵심이고, 이에 따라 re-rendering을 해주어야 안해주어야 하는지 판단할 줄 알아야 한다. 무지성으로 쓴다면 오히려 더 성능에 좋지 않다. 메모리를 계속 잡아먹고 있어 gc가 안됨 memo, callback을 생성하기위해 추가로 여러 함수 및 변수를 실행하기에 좀더 복잡한 연산을 해야한다. useMemo 고비용 연산을 하는데 캐쉬가 필요할 때 props이 같을 경우 re-render를 하지말아야 할때 props가 같은지 비교하는건 referential equality를 참고해야한.. 2023. 6. 23. React - Error: ReactDOMServer does not yet support Suspense. 원인 SSR를 위한 ReactDOMServer.renderToString 에서 Suspense 컴포넌트를 지원하지 않았기 때문 해결방법 브라우저에서 읽을 때와 Node에서 읽을 때를 구분지어서 코딩하면 된다. 새로운 컴포넌트를 만들고 그 안에 node일떄는 fallback 컴포넌트를, 아닐 경우 Suspense 컴포넌트를... import React, { Suspense } from 'react'; const isBrowser = typeof window !== 'undefined'; const SuspenseWrapper = (props) => { if (isBrowser) return return props.fallback }; export default SuspenseWrapper 2023. 6. 22. React - useCallback 개념 함수 자체를 memoization, 즉 메모리에 저장하두었다가 필요할 때 사용 (함수도 객체. 즉 변수에 할당 가능) 이유 리엑트는 기본적으로 state가 변경하면 re-rendering이 발생되는데, re-rendering이 되는 컴포넌트 안에 있는 함수도 재생성 된다. 함수가 재생성 되는 것을 최소화 하여 성능에 이득을 본다. re-rendering이 된다는건 해당 함수형 컴포넌트가 재호출 된다는 것이고 이 말은 함수 내부의 객체가 다시 만들어진다는 뜻 그래서 함수도 객체니 다시 만들어짐 객체는 heap에 저장이 되고, 객체를 담은 변수는 객체의 저장위치를 기억한다. 그래서 함수안에 있는 내용이 같더라도 새롭게 다시 만들어지니 저장위치가 계속 변하니 변수에 다른 메모리 주소가 저장 됨 하지만, .. 2023. 6. 22. 이전 1 2 3 4 5 6 다음
