IT/react32 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. React - forward ref 요약 자식 컴포넌트에 ref prop을 react guide대로 넘겨주고 싶을 때 forwardRef 사용한다. 사례 보통 ref를 자식 컴포넌트에 prop으로 전달해주는 상황은 많지 않은데, 간혹 전달해주어야할 상황이 발생한다 ref를 prop으로 넘겼을 때 jsx syntax 에러가 발생한다. 이유는 ref는 React에서 특수한 목적으로 사용되는 prop이라 일반적인 용도로 개발자가 사용할 수 없다. (key도 마찬가지) Warning: Input: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child com.. 2023. 6. 22. 이전 1 2 3 4 5 6 다음
