useTabs 를 실제로 활용해 보기.

직장 구하면서 포트폴리오 사이트 하나를 만들었는데.. 뭔가 코드가 너무 지저분해 보였다..

기존 코드다 ㅡㅡ;; 모달창 하나 띄우는데 코드를 이렇게 많이쓰다니.. 형편없다.;;

포트폴리오 라우터에서 각각의 포트폴리오당 모달창을 띄우는데 flag를 각각에 주고 각각을 실행하다보니 가가가가가가각이다..

 

그래서 아침에 급하게 이번에 배운 useTab을 활용해 볼까했다.

이미 npm에 배포는 되어있으니 설치를 해주고

네개나 쓰던 modal flag를  하나도 줄였다. 그리고 useTabs를 사용해서  portDatas를 배열 인자로 넣어주었다.

closeModal 함수도 간결해졌다. 하나니까..

 

그렇게 하고서~ 포트폴리오 데이터 스테이트를 map함수를 이용해 각각 화면에  띄워준다.

onClick시  setModal을 이용해 해당 flag를 true로 바꿔주고 useTabs에 changeItem 함수에 클릭된 데이터의 index를 넣어준다

잘 적용이 된다. 클릭하면 changeItem을 이용해 해당 index의 데이터를 PortModal에 props로 전송해주고 

modal이 true이면 띄워주고 false이면 null을 준다

역시 잘 적용이 된다!! 굳굳 이제 master에 merge해주고 gh-pages에 deploy해주면 끝!

 

이렇게 어이없게 방대했던 코드가..

useTabs하나로

이렇게 끝났다 ㅋㅋ hook 최고