Day-41: React로 간단한 불빛 토글 컴포넌트 구현 방법

카테고리

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

서브카테고리

웹 개발

대상자

초보~중급 React 개발자

• useState와 조건부 렌더링 기초 학습자
• 컴포넌트 상태 관리 개념 이해 필요자

핵심 요약

• useState를 사용하여 불빛 상태(isOn)를 관리
• useState(false)로 초기 상태 설정
• 조건부 렌더링을 통해 불 이미지 전환
• isOn ? :
• 버튼 클릭 이벤트 처리로 상태 토글
• onClick={() => setIsOn(!isOn)} 로 상태 변경

섹션별 세부 요약

1. 상태 초기화

• const [isOn, setIsOn] = useState(false);
• 불 상태를 false(OFF)로 초기화
• useState 훅을 사용하여 상태를 동적으로 관리

2. 조건부 렌더링 구현

• 불 상태에 따라 이미지 전환
• isOn이 true일 때 bulb1.jpg 표시
• false일 때 bulb2.jpg 표시
• alt 속성으로 이미지 설명 제공

3. 버튼 이벤트 처리

• 버튼 텍스트 동적 변경
• isOn ? 'Turn Off' : 'Turn On'
• onClick 이벤트로 상태 토글
• setIsOn(!isOn)로 isOn 값 반전

결론

• 핵심 팁: useState와 조건부 렌더링은 React 컴포넌트의 핵심 개념으로, 실제 UI 개발에 직접적으로 적용 가능
• 구현 예시: public 폴더에 bulb1.jpg, bulb2.jpg 이미지 파일을 준비한 후, src 경로를 정확히 설정해야 정상 작동
• 추천사항: 상태 관리와 UI 전환을 연동하는 간단한 프로젝트로 React 학습을 시작하는 것을 권장