[ React / useState ] 다중 팝업 제어하기 열기(Feat.)

보통은 CSS클레스로도 display none 처리하여 popup을 처리하기곤 한다.

이번엔 useState를 사용하여 처리를 해보려고 했다.

 

situtation : 한 페이지에서 일자와 사람이 같이 팝업으로 열림.

 

Task : 한 페이지에서 1개 이상의 팝업이 열리는 것 방지

 

action

1) CSS =>  display : none

2) useState => boolean or number

 

2)을 선택하여 진행 => 이유 1) 속도 측면에서 큰 차이가 없다. 누가 먼저 동일 페이지에서 로드 했냐가 차이를 .1 만들뿐 2) 1)보다는 코스 수가 간결하다 특히 CSS

 

Result

1. 한개만 띄게 완료

2. 바탕화면(?) 클릭 시 팝업 닫기 완료