라디오버튼 이미지로 토글 만들기

내용

• 클릭했을때 활성화된 이미지 버튼으로 바뀐다
• 둘중에 하나만 활성화됨

결과

코드

//Radio.js 재사용 컴포넌트
const Radio = ({ handleClickAdmin, click, text }) => {
  return (
    <ButtonBox>
     <AdminText>
      <NomalImg
    	alt="nomalImg"
    	src="/images/비활성화.png"
    	onClick={() => handleClickAdmin()}
	show={click}
	/>
      <ChangedImg
	alt="changedImg"
    	src="/images/활성화.png"
    	onClick={() => handleClickAdmin()}
	show={click}
	/>
      {text}
    </AdminText>
  </ButtonBox>

const NomalImg = styled.img`
  ${({ show })} => {
    return show ? `display:none` : `display:blick`;
   }}
`;

const ChangeImg = styled.img`
  ${({ show })} => {
    return show ? `display:blick` : `display:none`;
   }}
`;

//Login.js
const Login = () => {
  const [inputStatus, setInputStatus] = useState(false);
  
  const handleClickAdmin = () => {
    setInputStatus(!inputStatus);
  };

  return(
    <AdminText>
          <Radio
            click={!inputStatus}
            handleClickAdmin={handleClickAdmin}
            text="관리자"
          />
          <Radio
            click={inputStatus}
            handleClickAdmin={handleClickAdmin}
            text="기업"
          />
     </AdminText>

설명

1. onClick이벤트가 발생하면 handleClickAdmin을 실행하고
2. setInputStatus으로 false->true로 바꿔줌
3. click이 true로 바뀌면서 show가 true 또는 false로 바뀌면서
4. 스타일컴포넌트의 조건문이 실행된다
   ** onClick은 이벤트가 발생하는 해당 컴포넌트에서 적어줘야한다

내생각

input radio type을 처음 사용해봤다
하나가 클릭 되었을때 다른 하나는 비활성화 되어야 하니까 처음 접했을땐 너무 어려워서 시간이 꽤 걸렸다.
1. 클릭했을때만 background-color를 변경
2. radio 가 아닌 이미지토글로 해서 클릭하면 이미지가 변하게
3. onClick 각각에 다른 함수 달기
4. 한 함수로 계속 state 반대로 변경하기
등등의 여러 방법들의 고민들이 생겼었다.
background-color로 하니까 버튼전체가 주황색이 되어 테두리 선이 보이지 않아서 패스하고 이미지토글로 변경했다.
그리고 한 함수로 하나의 state를 관리하면서 반대로 변경해준다.
처음에는 계속 inputState따로 show 따로 관리를 하려고 시도했는데 그게 아니였다.
하나의 state로 관리하면서 click은 state를 직접적으로 연결되고,
show는 함수로 연결된다