안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

안티패턴을 통해 더 나은 코드를 작성하는 방법을 배워보세요. 개발자들이 실수하는 패턴들을 분석하고 개선방안을 제시합니다.

연결하기

© 2026 Smelly.dev All rights reserved.

Props Drilling (프롭스 드릴링) 🕳️: 컴포넌트 간 불필요한 의존성 심화와 유지보수의 악몽

컴포넌트 트리의 여러 단계에 걸쳐 Props를 전달해야 하는 'Props Drilling'은 코드의 가독성을 해치고, 불필요한 재렌더링을 유발하며, 컴포넌트 간의 결합도를 높여 유지보수를 어렵게 만듭니다. React Context API, 상태 관리 라이브러리, 또는 컴포넌트 합성(Composition)을 통해 데이터를 필요한 컴포넌트에 직접 전달하고, 코드의 응집도를 높여야 합니다.

사용자 선호도 무시: 시스템 설정(다크 모드, 모션 감소) 외면 🌗

운영체제 수준에서 설정된 다크 모드나 모션 감소와 같은 사용자 선호도를 무시하면 사용자 경험 저하 및 접근성 문제를 야기합니다. CSS의 `prefers-color-scheme`, `prefers-reduced-motion` 미디어 쿼리와 JavaScript의 `window.matchMedia()`를 활용하여 시스템 선호도에 맞춰 UI를 동적으로 조정해야 합니다. 이는 사용자의 기대치를 충족시키고 포용적인 웹을 만드는 데 필수적입니다.

📉 과도한 메모이제이션(Memoization) 남용: 불필요한 복잡성과 오버헤드

React `useMemo`와 `useCallback` 훅을 실제 성능 병목 없이 과도하게 사용하면, 오히려 메모리 및 연산 오버헤드를 발생시키고 코드 복잡성을 증가시켜 애플리케이션의 효율성을 저하시킵니다. 메모이제이션은 측정 후 필요한 곳에만 신중하게 적용해야 합니다.

🔑 배열 인덱스를 React 리스트 `key`로 사용하기: 예측 불가능한 UI와 성능 저하

React 리스트에서 `key` prop으로 배열 `index`를 사용하는 것은 리스트 항목의 순서 변경, 추가, 삭제 시 예측 불가능한 UI 버그와 성능 문제를 야기합니다. React가 항목의 신원을 정확히 추적하도록 각 리스트 항목에 고유하고 안정적인 식별자(ID)를 `key`로 제공해야 합니다.

🚀 SEO 친화적이지 않은 클라이언트 사이드 렌더링(CSR) 남용: 검색 엔진의 외면

클라이언트 사이드 렌더링(CSR)만으로 웹사이트를 구축할 경우, 검색 엔진 크롤러가 JavaScript를 완전히 실행하지 못하거나 느리게 처리하여 SEO에 치명적인 영향을 줍니다. SEO에 중요한 페이지에는 SSR, SSG 또는 하이브리드 렌더링 전략을 사용하여 검색 엔진 친화적인 콘텐츠를 제공하고 사용자 경험을 개선해야 합니다.

렌더링전략

렌더링전략

🐌 레이아웃을 강제로 발생시키는 CSS 속성 남용: 뚝뚝 끊기는 애니메이션과 성능 저하

잦은 레이아웃 재계산과 페인트 작업은 웹 성능을 저하시키고 UI를 버벅거리게 만듭니다. `transform`과 `opacity` 같은 속성을 사용하여 레이아웃과 페인트를 건너뛰고 GPU 가속을 활용하는 것이 부드러운 애니메이션과 최적의 성능을 위한 핵심입니다.

애니메이션/UI

렌더링전략

🐛 불변성(Immutability) 무시한 상태 업데이트: 예측 불가능한 UI와 디버깅의 악몽

React에서 상태(객체/배열)를 직접 수정하면 얕은 비교로 인해 변경을 감지하지 못해 UI가 업데이트되지 않고 버그를 유발합니다. 항상 스프레드 문법 등으로 새로운 상태를 생성하여 불변성을 유지해야 합니다.

💥 CSS !important의 남용: 예측 불가능한 스타일의 늪

`!important` 키워드를 남용하면 CSS 캐스케이드 규칙을 무시하여 스타일 간의 우선순위 충돌을 야기하고, 디버깅을 어렵게 하며, 재사용성과 유지보수성을 심각하게 저해합니다. 대신 CSS 우선순위 규칙을 이해하고, 시맨틱하고 명확한 클래스 구조를 사용하며, 필요한 경우 CSS Custom Properties나 CSS-in-JS와 같은 스코프 기반 솔루션을 활용하여 예측 가능하고 관리하기 쉬운 스타일을 구축해야 합니다.

🧱 커스텀 컴포넌트의 ARIA 속성 누락: 접근성의 벽 쌓기

일반 HTML 요소로 만든 커스텀 컴포넌트(탭, 모달 등)에 WAI-ARIA `role`, `state`, `property`를 누락하면 보조 기술 사용자가 목적과 상태를 이해하기 어려워 접근성을 저해합니다. 적절한 ARIA 속성을 추가하고 키보드 접근성을 확보하여 모든 사용자를 위한 포용적인 UI를 구축해야 합니다.

🔄 useEffect의 과도한 남용: 의도치 않은 재실행과 복잡한 의존성 관리

React `useEffect` 훅을 사용할 때, 실제 로직 수행에 필요 없는 의존성을 추가하거나 사용자 액션에 의해 트리거되어야 할 로직을 `useEffect`에 묶어두면 불필요한 재실행, 성능 저하, 예측 불가능한 동작을 유발합니다. 최소한의 필수 의존성만 포함하고, 이벤트 기반 로직은 이벤트 핸들러에서 직접 처리하며, `useCallback` 등으로 함수 참조 안정성을 확보하여 효율적인 데이터 흐름을 만들어야 합니다.

비동기처리

Previous
Next