안트 디자인 antd tabs 응용하기

각각 탭을 누르면 로그인 창과 회원가입 창으로 변환하도록 만들 예정이다.
우선 antd를 이용하여 tabs 디자인을 가져와 활용할 것이다.

npm install antd로 모듈을 설치한다.

그리고 https://ant.design/components/form에서 사용할 폼을 가져온다.

이 경우 map을 돌려 내용이 content of tab Pane1, content of tab Pane2만 나온다.

안트 디자인의 다른 버전의 코드를 응용한다.
아래 링크에서 일부를 가져오고,
https://4x.ant.design/components/tabs/

아래처럼 로그인 폼 컴포넌트를 형성하여 같은 코드가 여러번 반복되지 않도록 한다.

위 사진처럼 탭에 따라 잘 나오는 것을 볼 수 있다.