이미지 클릭하면 다른 이미지로 교체

좋아요 버튼, 고정핀 버튼과 같이
클릭 전후로 이미지가 바뀌도록 할 것이다.

import React, {useState} from "react";
import styled from 'styled-components';

//빨간 고정 핀
const RedPin = styled.div`
  background-image: url("/images/레드핀.svg");
  background-size: cover;
  width: 30px;
  height: 30px;
  margin: 10px 0 0 0;
  cursor: pointer;
`;

//투명 핀
const Pin = styled.div`
  background-image: url("/images/핀.svg");
  background-size: cover;
  width: 30px;
  height: 30px;
  margin: 10px 0 0 0;
  cursor: pointer;
`;

const Page1 = () => {

  const [pin, setPin] = useState(false); // 고정핀
  const handlePin = () => { 
    setPin(!pin);
  }
  
  return (
  
  	<PinAndUserContainer>
    	<div onClick={handlePin}> {/*고정핀 핸들*/}
        		{pin ? (
            	<RedPin />
        	) :
        	(
            	<Pin />
        	)}
       	</div>
        <Envelope>
        </Envelope>
        <UserNickname>
        	닉네임
        </UserNickname>
	</PinAndUserContainer>
  );
    
};
 
export default Page1;

참고링크