로그인/회원가입 페이지 레이아웃을 하면서 각각의 컴포넌트로 나눴다.
처음 login.js 에서 form이라는 컴포넌트에 props로 각각의 signInKaKao,signIn,signUp 데이터를 넘겨준다.
form이란 컴포넌트 안에는 각각의 또 공용으로 쓰는 컴포넌트를 가져와서 쓰고 있다.
button 컴포넌트,input 컴포넌트, formlayout 컴포넌트 idpw 컴포넌트 등등
props.data.image 가 true 이면 이미지 사진이 나오는 로고박스 레이아웃이 나오고 false 이면 이미지가 없는 로고 박스가 나오는 로직이다.
이 부분은 input이라는 컴포넌트를 활용하여 input을 여러개 만드는 로직이다.
현재 button 및 input 컴포넌트들도 활용하여 페이지 구현한 모습이다.
처음에는 저 페이지를 3개로 나눠서 각각 다 작업하고 button 및 input 도 싹 다 만들어 줬었는데 컴포넌트화 해놓으니깐 훨씬 작업이 쉬워진 느낌이다.(이 방법으로 적응하는데 꽤 걸렸다..)
아직 레이아웃이 완성 된건 아니고 적용할게 더 남아서 얼른 마무리 하고 기능구현으로 넘어가야겠다.
와 컴포넌트 재사용 굿굿이네요 🤗🤗 우리같이 하드코딩 탈출해요