컴포넌트 재사용, 로그인 회원가입창 클론 예시

 

 

 

 

 

컴포넌트

: 재사용할 수 있는 최소 UI 단위

: 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것

: 코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 컴포넌트를 분리함

 

 

컴포넌트 분리기준

: 다양함 (밑은 예시)

 

UI를 표현하고자 하는 컴포넌트

동작하는 로직을 담고 있는 컴포넌트

두가지 역할을 모두 담고 있는 컴포넌트

그 외의 역할을 담고 있는 컴포넌트

 

 

 

---

 

 

로그인 회원가입창 클론 중 컴포넌트 재활용 예시

 

 

 

 

☺️

클론을 진행하며 컴포넌트 재사용(특히 UI적인 부분)을 경험해 이를 기록하려한다

 

 

 

 

 

 

 

👆 구현한 로그인, 회원가입 창

 

 

 

 

 

 

 

html

 

 

 

너무 신기하게도 이 html 하나로 로그인, 회원가입을 구현할 수 있다!

 

login 과 signup 창이 유사한 부분이 있어 id, pw 창과 그 외의 UI적인 유사한 부분을 컴포넌트 재사용했다.
다른 부분은 title (로그인<>회원가입), btnText (로그인<>회원가입하기), 로그인창에만 있는 '회원가입하기'(link to signup)', img(화면 전체적인 img 차이)

 

useState로 각각 input창(name, value 사용)에 id pw를 저장했고 passed에 유효성 검사를 담은 후 적용할 버튼에 disabled = {!passed}를 주어 버튼 디폴트 값을 비활성화했다.

 

같은 버튼으로 signup 창엔 '회원가입하기' 를 텍스트, login 창엔 '로그인' 텍스트를 넣었다.

그리고 이 버튼으로 각각 로그인, 회원가입 fetch 함수가 담긴 변수를 적용하기 위해 (isSelectLogin)을 login.js 에서 user.js 로 props 를 넘겨주어 버튼에 삼항자로 넣었다.

 

 

 

 

 

 

 

후기

 

 

컴포넌트 재활용이라는 걸 처음 접했는데 너무 신기했다

이 때문에 리액트를 쓰는 건가 크게 느꼈던 경험이었다

 

 

 

 

 

👋👋