조건에 따라 해당 Element나 Component를 표시하고 숨길 때, hook {useState}을 사용하는 방법

(코드보단 원리를 보는게 응용하기 좋을 것 같아 로직위주로 정리)

1. hook에서 useState로 state변수를 생성: 해당 state가 true가 되거나 값이 채워지면 요소가 보이게 하기, 여기서는 boolean을 사용하였다

const [show, setShow] = useState(false);

2. 조건이 만족되면, setState를 이용해 state를 변경

setShow(true);

3. component를 return할 때, 해당 state변수가 참이라면, 보여질 수 있도록 한다.

(여기서는 show가 있다면 Service Component가 return 되도록 하였다.)

return (
    { show && <Service /> }
)

4. 다시 component를 숨길 때는, setState를 이용해 state변수를 초기값으로 변환한다.

setShow(false);
  • 이렇게 해서 메뉴 토글버튼도 만들 수 있음!

Leave a comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다