[Archives] Toggle

📚 기록, Toggle 기능을 만들어보자.

자유게시판 포트폴리오를 만들던 도중, 아이콘을 클릭하면 팝업 창이 뜨는 기능을 구현하고 싶어졌다. 혼자 구현해 본 내용과 멘토님의 도움을 받은 코드를 다음에 다시 사용할 수 있도록 기록으로 남겨두자.

1. className 사용하기

JSX 태그에 className을 붙여 class가 있으면 display: none; class가 없으면 display: block;을 적용한다.

JSX 코드

export default function DetailPage () {
	const [ isOn, setisOn ] = useState(false)
    const toggleHandler = () => {
        setisOn(!isOn)
    }
    return(
      <HeaderIconBox>
      	<HeaderLinkIcon src="/ic_link.png"></HeaderLinkIcon>
      	<HeaderLocationIcon src="/ic_location.png" onClick={toggleHandler}></HeaderLocationIcon>
		<HeaderIconPopUpBox className={`${!isOn ? "toggle_checked" : null}`}>
  			<HeaderIconPopUpText>
  				서울특별시 영등포구 양산로 200 <br></br>(영등포동5가, 영등포시장역) 영등포 타임스퀘어 2층
			</HeaderIconPopUpText>
			<HeaderIconPopUpBG src="/popup.png"></HeaderIconPopUpBG>
		</HeaderIconPopUpBox>
	</HeaderIconBox>
    )
}

CSS-IN-JS 코드

export const HeaderIconBox = styled.div`
    display: flex;
    align-items: center;
    position: relative; 
> .toggle_checked{
    	display: none;
    }
`
export const HeaderIconPopUpBox = styled.div`
    width: 376px;
    height: 64px;
    position: absolute;
    top: calc(-100% + -6px);
    right: 15px;
`

1. const [ isOn, setisOn ] = useState(false)를 작성하여
   토글의 상태값을 담아주는 state를 만든다.
2. toggleHandler 함수를 만들어 onClick하면 isOn의 상태를 변경해주는 메소드를 작성한다.
3. 스위치가 될 HeaderLocationIcon 태그에 toggleHandler 함수를 연결한다.
4. 온오프 시킬 HeaderIconPopUpBox에 className={`${!isOn ? "toggle_checked" : null}`}를 달아준다.
5. HeaderIconPopUpBox의 부모요소인 HeaderIconBox에게 > .toggle_checked{display: none;}을 더해준다.

그러나 더 쉽고 빠르게 만드는 방법이 있다!

2. 조건부 렌더링 사용하기

JSX 코드

export default function DetailPage () {
	const [ isOn, setisOn ] = useState(false)
    const toggleHandler = () => {
        setisOn(!isOn)
    }
    return(
      <HeaderIconBox>
      <HeaderLinkIcon src="/ic_link.png"></HeaderLinkIcon>
      <HeaderLocationIcon src="/ic_location.png" onClick={toggleHandler}></HeaderLocationIcon>
          {isOn &&
            <HeaderIconPopUpBox>
            <HeaderIconPopUpText>
            서울특별시 영등포구 양산로 200 <br></br>(영등포동5가, 영등포시장역) 영등포 타임스퀘어 2층
           </HeaderIconPopUpText>
           <HeaderIconPopUpBG src="/popup.png"></HeaderIconPopUpBG>
           </HeaderIconPopUpBox>
          }
	</HeaderIconBox>
    )
}

• { isOn && }을 사용하여 isOn이 true일 경우에는 중괄호 안의 내용을 렌더링하고 false인 경우에는 렌더링을 하지 않는다!!

CSS를 수정하지 않아도 되기 때문에 매우 효율적이다!

💖 마무리

React JSX로 토글 버튼을 구현하는 방법에 대해 알아보았다. 열심히 구글링하여 찾은 정보로 어느 정도 해결할 수 있었지만 멘토님의 조언으로 훨씬 쉽고 간단한 코드를 구현할 수 있었다. 두 방법을 비교해보며 유사한 기능을 제작할 때 참고해야겠다. 또한, 코드의 리팩토링의 힘에 대해 알게 되어 놀라웠다! 꾸준히 간결한 코드를 짜는 방법에 대해 고민해봐야겠다.