[React] 토글 스위치 컴포넌트 만들기

훅을 학습하기 전에 useState를 더 연습해보기 위해 간단한 토글 스위치 컴포넌트인 "Toggler"를 만들어보겠습니다. 이 컴포넌트는 클릭할 때마다 웃는 얼굴과 슬픈 얼굴을 번갈아 보여주는 간단한 토글 기능을 구현한 것입니다.

Toggler 컴포넌트 생성

먼저 Toggler.jsx 파일을 생성하고, 다음과 같이 기본 구조를 작성합니다.

// Toggler.jsx
import React, { useState } from 'react';
import './Toggler.css'; // 스타일링을 위한 CSS 파일 가져오기

export default function Toggler() {
  const [isHappy, setIsHappy] = useState(true);

  const toggleIsHappy = () => {
    setIsHappy(!isHappy); // 현재 상태를 부정하여 토글
  };

  return (
    <div className="Toggler" onClick={toggleIsHappy}>
      {isHappy ? <span role="img" aria-label="happy face">😊</span> : <span role="img" aria-label="sad face">😢</span>}
    </div>
  );
}

 

 

스타일링 추가

Toggler 컴포넌트에 스타일링을 적용하기 위해 Toggler.css 파일을 생성하고 다음과 같이 작성합니다.

/* Toggler.css */
.Toggler {
  font-size: 5rem;
}

동작 확인

이제 리액트 앱을 실행하고 토글 스위치가 제대로 동작하는지 확인하세요. 클릭할 때마다 웃는 얼굴과 슬픈 얼굴이 번갈아가며 표시될 것입니다. 해당 컴포넌트에서 사용된 useState 훅은 상태를 관리하고 토글 기능을 쉽게 구현할 수 있게 해줍니다.