React에서 클릭으로 이미지 토글을 생성하는 방법

클릭 시 이미지 변경 – 리액트

이 튜토리얼에서는 리액트 애플리케이션에서 이미지를 클릭하여 이미지를 변경하는 방법을 배우게 됩니다. 이를 위해 이미지가 “minus.png”과 “plus.png” 두 가지 상태 사이에서 토글되도록 할 수 있는 다양한 접근 방식을 살펴보겠습니다.

접근 방식 1: 토글 핸들러 사용

첫 번째 방법은 리액트 컴포넌트에서 토글 핸들러를 만드는 것입니다. 다음은 예시 구현 코드입니다:

const imagesPath = {
  minus: "https://images.vexels.com/media/users/3/131484/isolated/preview/a432fa4062ed3d68771db7c1d65ee885-minus-inside-circle-icon-by-vexels.png",
  plus: "https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png"
}

class App extends React.Component {
  state = {
    open: true
  }

  toggleImage = () => {
    this.setState(state => ({ open: !state.open }))
  }

  getImageName = () => (this.state.open ? 'plus' : 'minus')

  render() {
    const imageName = this.getImageName();
    return (
      <div>
        <img style={{maxWidth: '50px'}} src={imagesPath[imageName]} onClick={this.toggleImage} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

위 코드에서, 우리는 “minus.png”과 “plus.png”의 URL을 포함하는 imagesPath 객체를 정의합니다. open이라는 초기값이 true인 상태 변수를 가진 리액트 컴포넌트인 App을 만듭니다.

또한, 현재 상태에 따라 어떤 이미지 URL을 사용할지 결정하는 toggleImage와 getImageName 두 가지 메서드를 정의합니다.

render 메서드에서는 imagesPath[imageName]을 사용하여 이미지 태그의 src 속성으로 이미지 URL을 가져옵니다. 이미지에는 toggleImage 메서드가 클릭되었을 때 트리거되는 onClick 이벤트 핸들러도 추가됩니다.

접근 방식 2: 조건부 렌더링

다른 방법은 상태에 따라 이미지 소스를 토글하는 조건부 렌더링을 사용하는 것입니다. 다음은 예시 구현 코드입니다:

import React, { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(true);

  const toggleImage = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <img
        src={isOpen ? "path/to/minus.png" : "path/to/plus.png"}
        alt="Toggle Image"
        onClick={toggleImage}
      />
    </div>
  );
}

export default App;

위 예시에서는 useState 훅을 사용하여 초기값이 true인 상태 변수인 isOpen을 정의합니다. toggleImage 함수는 상태 값을 토글합니다.

렌더 메서드에서는 isOpen 상태에 따라 이미지의 src 속성을 설정합니다. isOpen이 true일 때는 “path/to/minus.png” 이미지의 경로를 표시하고, false일 때는 “path/to/plus.png” 이미지의 경로를 표시합니다.

접근 방식 3: 클래스 컴포넌트 사용

클래스 컴포넌트를 사용하고자 하는 경우, 다음 코드로 동일한 기능을 구현할 수 있습니다:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: true
    };
  }

  toggleImage = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen
    }));
  };

  render() {
    return (
      <div>
        <img
          src={this.state.isOpen ? "path/to/minus.png" : "path/to/plus.png"}
          alt="Toggle Image"
          onClick={this.toggleImage}
        />
      </div>
    );
  }
}

export default App;

위 예시에서, 초기값이 true인 상태 변수인 isOpen을 가진 클래스 컴포넌트인 App을 정의합니다. toggleImage 메서드는 상태를 토글합니다.

렌더 메서드에서는 isOpen 상태에 따라 이미지의 src 속성을 설정합니다. isOpen이 true일 때는 “path/to/minus.png” 이미지의 경로를 표시하고, false일 때는 “path/to/plus.png” 이미지의 경로를 표시합니다.

결론

이 튜토리얼에서는 리액트 애플리케이션에서 클릭하여 이미지를 변경하는 다양한 접근 방식을 살펴보았습니다. 토글 핸들러, 훅을 사용한 조건부 렌더링, 클래스 컴포넌트를 사용하는 세 가지 방법을 학습했습니다. 프로젝트 요구 사항에 가장 적합한 방법을 선택하시기 바랍니다.

리액트 라이브러리 및 필요한 CSS 또는 이미지 파일과 같은 필수 종속성을 가져오는 것을 잊지 마세요. 이러한 기술을 사용하여 리액트 애플리케이션에서 이미지 토글 기능을 쉽게 구현할 수 있습니다.

참고 자료 : 

reactjs