Sign in

it

it dev react useeffect

[React] useEffect 의존성 빈 배열 경고 - react-hooks/exhaustive-deps 왜?

이번 글에서는 왜 eslint-disable-line, react-hooks/exhaustive-deps 경고를 알려주는지 알아보도록 하겠습니다. 리액트 코드를 작성하거나, 읽다보면 제법 심심치 않게 eslint-disable-line, react-hooks/exhaustive-deps 주석을 사용해 아래의 경고를 무시한는 것을 볼 수 있습니다. (저 또한.. 그랬습니다..) 이 ESLint룰은 useEffect 인수 내부에서 사용하는 값 중 의존성 배열에 포함돼 있지 않은 값이 있을 때 경고를 발생시킵니다. 정말로 필요할 때에는 사용할 수도 있지만 대부분의 경우에는 의도치 못한 버그를 만들 가능성이 큰 코드입니다. 이 코드를 사용하는 대부분의 예제가 빈 배열 []을 의존성으로 할 때, 즉 컴포넌트를 마..
wono | discuss |
it dev nextjs suspense

[Next.js] Suspense를 이용한 Skeleton UI 적용하기

위와 같은 페이지에 리스트 데이터가 렌더링 되기 전까지 스켈레톤을 보여주려고 한다. Next.js에서도 React와 마찬가지로 Suspense를 사용하여 Skeleton UI를 적용할 수 있다.     Skeleton 컴포넌트 구현하기(app/components/Skeleton.tsx)import styles from '@/styles/skeleton.module.scss'interface SkeletonProps { w: number h: number radius?: number wUnit?: string style?: React.CSSProperties}export default function Skeleton({ w, h, wUnit = 'px', radius = 8, style,..
wono | discuss |