안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

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

연결하기

© 2026 Smelly.dev All rights reserved.

프레임워크 내부에서 직접 DOM 조작하기: 선언적 UI의 파괴 💥

프레임워크가 관리하는 UI 컴포넌트 내부에서 `document.querySelector`와 같은 네이티브 DOM API를 직접 사용하는 것은 예측 불가능한 버그, 심각한 성능 저하, 그리고 유지보수성 저하를 야기합니다. 대신 프레임워크의 상태 관리와 선언적 렌더링 방식을 활용하여 UI를 제어해야 합니다.

과도한 클라이언트 측 데이터 처리: 비효율적인 성능과 UX 📉

대용량 데이터를 클라이언트에서 필터링, 정렬, 페이지네이션하는 것은 네트워크 대역폭 낭비, 메모리 사용량 증가, 그리고 심각한 UI 성능 저하를 야기합니다. 대신 서버 측 API를 적극 활용하여 필요한 데이터만 가져오고, 점진적 로딩 전략을 도입해야 합니다.

프로젝트 규모를 키우는 프롭 드릴링 (Prop Drilling) 🐛

불필요하게 많은 컴포넌트 계층을 통해 데이터를 전달하는 프롭 드릴링은 코드 가독성, 유지보수성, 재사용성을 심각하게 저해하고 컴포넌트 간 강한 결합도를 유발합니다. 대신 React Context API나 전역 상태 관리 라이브러리, 또는 컴포넌트 합성 패턴을 활용하여 깨끗하고 효율적인 데이터 흐름을 만들어야 합니다.

CSS 체크박스 해킹: 유지보수 지옥 ⛓️

CSS만으로 복잡한 UI 상태를 제어하는 것은 접근성과 유지보수성을 심각하게 해치며, 궁극적으로 더 많은 개발 비용을 초래합니다. 시맨틱 HTML, WAI-ARIA, 그리고 JavaScript를 통한 명확한 책임 분리가 올바른 해결책입니다.

텍스트만 있는 `div`를 버튼으로 사용하기 🚫

`div`를 버튼처럼 사용하면 키보드 접근성, 스크린 리더 지원 등 웹 접근성을 심각하게 저해하며 불필요한 개발 공수를 야기합니다. 대신 시맨틱 `button` 또는 `a` 요소를 사용하여 내장된 접근성 이점을 활용하고 코드의 견고함을 높여야 합니다.

배열 인덱스를 React `key`로 사용하기 🤦‍♂️

React에서 목록을 렌더링할 때 배열 인덱스를 `key`로 사용하면 비효율적인 렌더링, 컴포넌트 상태 손실, 예측 불가능한 UI 버그를 유발합니다. 대신 각 목록 항목의 고유하고 안정적인 ID를 `key`로 사용해야 합니다.

🚀 레이아웃을 유발하는 CSS 애니메이션

CSS 애니메이션 시 `width`, `height`, `top`, `left` 등 레이아웃을 유발하는 속성 대신 `transform`과 `opacity`를 사용하여 성능 저하 없이 부드러운 애니메이션을 구현해야 합니다.

애니메이션/UI

애니메이션/UI

innerHTML의 위험한 유혹 🚨

`innerHTML`은 XSS 공격에 취약하고 성능 저하를 유발하므로, 안전한 DOM API나 프레임워크 바인딩을 사용해야 합니다.

과도한 리렌더링: 불필요한 컴포넌트, 콜백, 값의 비메모이징 🐢

React에서 부모 컴포넌트의 리렌더링 시 자식 컴포넌트에게 새로운 참조의 `props`(특히 함수, 객체, 배열)를 넘겨주면, 자식 컴포넌트가 불필요하게 리렌더링되어 성능 저하를 야기할 수 있습니다. 이를 해결하기 위해 `React.memo`, `useCallback`, `useMemo`를 사용하여 `props`의 참조 동일성을 유지하고 불필요한 렌더링을 방지해야 합니다. 단, 성능 프로파일링 후 필요한 곳에만 적용하는 것이 중요합니다.

Previous
Next