React와 CSS로 클릭 가능한 네비게이션 바 만들기

분야

프로그래밍/소프트웨어 개발

대상자

React 개발자, 프론트엔드 엔지니어, 초보 개발자

난이도: 중급 (React 상태 관리 및 CSS 동적 스타일링 기초 지식 필요)

핵심 요약

• *React와 CSS를 활용한 클릭 시 색상 변경 네비게이션 바 구현**
• useState를 사용해 클릭된 링크 상태를 관리하여 activeLink 상태 변수를 활용
• CSS transition 효과로 색상 변화를 부드럽게 구현 (기본: 흰색 → 클릭 시 노랑)
• className을 동적으로 변경해 링크 활성화 시 스타일 적용
• React 컴포넌트 구조에서 Navbar.js와 Navbar.css 파일로 분리하여 유지보수성 강화

섹션별 세부 요약

1. React 환경 설정

• npx create-react-app 명령어로 프로젝트 생성 후 개발 서버 실행
• src/Navbar.js 파일 생성 및 useState 훅으로 활성 링크 상태 관리
• handleLinkClick 함수 정의하여 클릭 시 activeLink 상태 업데이트

1. 네비게이션 바 컴포넌트 구현

• JSX로 링크 요소 생성 및 className을 activeLink 상태에 따라 동적 적용
• Home, About, Services, Contact 링크 각각 onClick 이벤트로 상태 변경
• Navbar.js에서 import 및 export default로 컴포넌트 등록

1. CSS 스타일링

• .navbar 클래스로 배경색(#333) 및 flex 레이아웃 적용
• 링크 기본 색상(흰색)과 transition: color 0.3s 효과 정의
• .active 클래스로 클릭 시 노랑색(#FFD700)으로 색상 변경

1. 앱 통합 및 실행

• src/App.js에 Navbar 컴포넌트 임포트 및 렌더링
• npm start 명령어로 개발 서버 실행 후 네비게이션 바 확인
• 링크 클릭 시 이전 링크 색상 회복 및 현재 링크 노랑으로 변환

결론

React 상태 관리(useState)와 CSS 전환 효과를 활용해 클릭 시 색상 변경 네비게이션 바를 구현했습니다. 이 방법은 사용자 경험 향상과 네비게이션 명확성을 제공하며, React의 동적 UI 렌더링 역량을 체험할 수 있는 실습 예제입니다. 실무 적용 시 React Router를 사용해 라우팅 기능을 추가하면 페이지 리로딩 없이 네비게이션을 개선할 수 있습니다.