조건에 따라 해당 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);- 이렇게 해서 메뉴 토글버튼도 만들 수 있음!
