라디오버튼 이미지로 토글 만들기
내용
- 클릭했을때 활성화된 이미지 버튼으로 바뀐다
- 둘중에 하나만 활성화됨
결과
코드
//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>
설명
- onClick이벤트가 발생하면 handleClickAdmin을 실행하고
- setInputStatus으로 false->true로 바꿔줌
- click이 true로 바뀌면서 show가 true 또는 false로 바뀌면서
- 스타일컴포넌트의 조건문이 실행된다
** onClick은 이벤트가 발생하는 해당 컴포넌트에서 적어줘야한다
내생각
input radio type을 처음 사용해봤다
하나가 클릭 되었을때 다른 하나는 비활성화 되어야 하니까 처음 접했을땐 너무 어려워서 시간이 꽤 걸렸다.
1. 클릭했을때만 background-color를 변경
2. radio 가 아닌 이미지토글로 해서 클릭하면 이미지가 변하게
3. onClick 각각에 다른 함수 달기
4. 한 함수로 계속 state 반대로 변경하기
등등의 여러 방법들의 고민들이 생겼었다.
background-color로 하니까 버튼전체가 주황색이 되어 테두리 선이 보이지 않아서 패스하고 이미지토글로 변경했다.
그리고 한 함수로 하나의 state를 관리하면서 반대로 변경해준다.
처음에는 계속 inputState따로 show 따로 관리를 하려고 시도했는데 그게 아니였다.
하나의 state로 관리하면서 click은 state를 직접적으로 연결되고,
show는 함수로 연결된다
Author And Source
이 문제에 관하여(라디오버튼 이미지로 토글 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/라디오버튼-이미지로-토글-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)