HTML 또는 JSX를 작성할 때 99% 개발자가 저지르는 5가지 실수 🚫💻

Source: Dev.to

왜 깨끗한 HTML/JSX가 중요한가

• Performance – 잘못된 마크업은 페이지 로드를 늦출 수 있습니다.
• SEO – 검색 엔진은 깔끔하고 의미론적인 HTML을 선호합니다.
• Accessibility – 적절한 태그와 속성은 모든 사용자가 사이트를 이용할 수 있게 합니다.
• Maintainability – 읽기 쉽고 구조가 잘 잡힌 코드는 디버깅과 확장이 더 쉽습니다.

이러한 문제를 해결하면 다음을 얻을 수 있습니다:

• ✅ 더 나은 SEO (Google은 깨끗한 HTML을 좋아합니다)
• ✅ React 앱에서 더 빠른 렌더링
• ✅ 디버깅이 쉬워짐 (미래의 당신이 감사할 것입니다)
• ✅ 모든 사용자를 위한 접근성 향상
• ✅ 직업 및 클라이언트를 위한 전문 수준 코드

실수 #1 – 의미론적 태그 대신 “ 남용하기

“ 자체가 악한 것은 아니지만, 과도하게 사용하면 브라우저와 스크린 리더가 레이아웃을 이해하기 어려워집니다.

Bad:

…
…
…

Good:

…
…
…

의미를 부여하기 위해 , , , , “, 등을 사용하세요.

실수 #2 – JSX 리스트에서 key Props 누락

React는 리스트 아이템을 추적하기 위해 key에 의존합니다. 없으면 예상치 못한 UI 버그가 발생합니다.

Bad:

items.map(item => - {item.name}
)

Good:

items.map(item => (
  - {item.name}

))

간단한 key prop은 렌더링 오류를 방지하고 성능을 향상시킵니다.

실수 #3 – 접근성 기본 사항 건너뛰기

접근성은 선택 사항이 아니라 전문적인 책임입니다.

• Images – 항상 alt 텍스트를 제공하세요.
• Form controls – “을 입력과 연결하세요.
• Buttons – 명확하고 설명적인 텍스트가 있는지 확인하세요.

Bad:

Good:

[Image: Company logo]
Name

Submit

실수 #4 – 복잡한 로직을 JSX에 직접 삽입하기

JSX 내부에 복잡한 조건 로직을 넣으면 컴포넌트가 읽기 어려워집니다.

Bad:

{user && user.isAdmin && user.permissions.includes('edit') && (
  Edit
)}

Good:

const canEdit = user?.isAdmin && user?.permissions.includes('edit');

return (
  <>
    {canEdit && Edit}
  
);

로직을 변수나 헬퍼 함수로 추출하여 JSX를 더 깔끔하게 만드세요.

실수 #5 – 모든 곳에서 인라인 스타일에 의존하기

인라인 스타일은 재사용성과 일관성을 해칩니다.

Bad:

Hello

Good:

• CSS 클래스를 사용하세요
• Tailwind와 같은 유틸리티 퍼스트 프레임워크 활용
• 적절할 때 styled components 또는 CSS 모듈 도입

Hello

빠른 체크리스트

• ✅ 의미론적 HTML 태그 사용
• ✅ 리스트 아이템에 key prop 추가
• ✅ 기본 접근성 준수 (alt, label, 버튼 텍스트)
• ✅ JSX 로직을 간단하고 선언적으로 유지
• ✅ 인라인 스타일보다 CSS 클래스 또는 스타일드 솔루션 선호

더 실용적인 개발자 블로그를 원하시나요?

방문하고 오늘 바로 프론트엔드 실력을 향상시키세요!