React 버튼 클릭 시 버튼 이미지 변경하기

React 버튼 누르면 버튼의 이미지 변경

지난 포스팅 가기

Figma 에서 디자인한 버튼을 실제 React에 적용하였습니다.

다만 저는 여기서 한 번 더 디자인의 진화를 바랍니다!

우선 제 현재 디자인을 한 번 보시겠나요?

저는 누르면 저 버튼의 디자인이 변경되기를 원합니다.

이를 위해서 저 오른쪽으로 뻗은 화살표가 아래를 향한 버튼 이미지를 하나 더 만들었죠.

저 버튼을 누르면 화살표가 아래로 뻗은 이미지로 변경되는 효과를 줘보겠습니다.

어떻게..?

어떤 로직을 사용하면 좋을지 우선 Chat GPT 에게 예시 코드를 받아봅시다.

Chat GPT 는 아래와 같이 코드를 구성해줬네요.

				
					import React, { useState } from 'react';
import image1 from './path/to/image1.png';
import image2 from './path/to/image2.png';

function MyComponent() {
  const [currentImage, setCurrentImage] = useState(image1);

  const toggleImage = () => {
    setCurrentImage(currentImage === image1 ? image2 : image1);
  };

  return (
    <button className="basic-field-choice" onClick={toggleImage}>
      <img src={currentImage} alt="Field Choice" />
    </button>
  );
}

export default MyComponent;

로직은 아주 간단합니다!

button 내부에 onClick 으로 toggleImage 함수를 넣었네요.

이 함수는 현재 currentImage 가 image1 이라면 image2 로.. 그 반대라면, image1 으로 currentImage를 변경하는 녀석입니다.

즉각적으로 currentImage 에는 서로 다른 이미지의 경로가 담기게 될 것이고..

이를 통해서 Button 으로 사용하는 이미지가 달라지겠군요.

위 코드의 로직을 그대로 적용해보겠습니다.

아주 잘 변경이 되는군요^^

저는 이걸 드롭다운 형태로 아래에 필드가 나타나는 형태로 더욱 진화시킬 예정입니다.

마치며...

Figma 를 통해 간단한 디자인을 하고, 그걸 가져와서 그대로 입혀버리면 참 편한 것 같습니다.

위 로직을 사용해서 좀 더 멋지게 사이트를 꾸밀 수 있을 것 같습니다.

이것보다 좀 더 진화된 내용을 보시려면 다음의 버튼을 참고해주세요.