useState 모달창 세개 토글? 하는법 궁금합니다.

[강성현]

모달창 띄우기 방법을 활용해서 버튼 세개를 주고
클릭된 버튼 하나에 대한 모달창만 띄우고 나머지 두개는 상태값을 false 로 주고 싶었습니다.

그래서 아래처럼 코드를 짰는데 비효율적인것 같아서요.
useState 하나만 써서 하거나 삼항연산자 말고 다른 방법을 쓰는 방법이 있을까요?

코드는 아래와 같습니다. 

function Home() {
  const [company, setCompany] = useState(true)
  const [department, setDepartmet] = useState(false)
  const [my, setMy] = useState(false)
  return (

        <div >
          < Button  onClick={() => {
            setCompany(true)
            setDepartmet(false)
            setMy(false)
          }}> 회사 </Button>

          <Button onClick={() => {
            setCompany(false)
            setDepartmet(true)
            setMy(false)
          }}> 부서 </Button>

           <Button onClick={() => {
            setCompany(false)
            setDepartmet(false)
            setMy(true)
          }}> 개인 </Button>

          {company === true ? <Company /> : null}
          {department === true ? <Department /> : null}
          {my === true ? <My /> : null}

        </div> 
)}
     

[codingapple]

array자료 쓰면 여러데이터를 한 곳에 모아서 보관할 수 있습니다

[글쓴이]

글