조건에 따라 Component 표시 / 숨기기

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);

이렇게 해서 메뉴 토글버튼도 만들 수 있다!