[React] 토글 클릭이벤트 구현

import {useState} from 'react';

const Container () => {
	const [toggle, SetToggle] = useState(false);
    
    const handleToggleClick = () => {
    	SetToggle(!toggle);
    }
    
    const Box = () => {
    	return (
          <div>Box</div>
        )
    }
    
    return (
      <div>
        <button onClick={handleToggleClick}></button>
        {toggle ? <Box /> : ''}
      </div>
    )
}

 

useState를 이용해서 초기값을 false로 설정하고, handleToggleClick 함수에서 SetToggle이 true가 되도록 한다.

버튼에 클릭이벤트를 onClick으로 받아오도록 해주고 toggle이 true이면 <Box />가 나타나도록 해준다