.gif&blockId=743d12a5-f17c-4b91-a76d-8a3aa6fd4c06)
•
반복되는 페이지
◦
Login - email: 이메일, 비밀번호
▪
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
▪
그렇다면 focusout 될 경우에도 선의 색이 반대로 다시 변할 것임.
▪
포커스를 잃을 때 유효성 검사를 진행하지 않음!
◦
Join - membership: 이메일, 비밀번호
▪
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
▪
그렇다면 focusout 될 경우에도 선의 색이 반대로 다시 변할 것임.
▪
포커스를 잃으면 바로 유효성 검사가 진행
◦
Join - membership - 2: 사용자 이름, 계정 ID, 소개
▪
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
▪
그렇다면 focusout 될 경우에도 선의 색이 반대로 다시 변할 것임.
▪
포커스를 잃으면 바로 유효성 검사가 진행
◦
Profile modification: 사용자 이름, 계정 ID, 소개
▪
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
▪
그렇다면 focusout 될 경우에도 선의 색이 반대로 다시 변할 것임.
▪
포커스를 잃으면 바로 유효성 검사가 진행
◦
add Product: 상품명, 가격, 판매 링크
▪
이전과 달리 따로 관련 명세가 구체적이지 않음. 이건 저희가 정해야할거 같습니다.
◦
product modification: 상품명, 가격, 판매 링크
▪
이전과 달리 따로 관련 명세가 구체적이지 않음. 이건 저희가 정해야할거 같습니다.
•
각 인풋마다 달라지는 점
◦
라벨
◦
placeholder
◦
required 여부: 소개의 경우 꼭 필요한 인풋일까?
◦
인풋에 걸려 있는 이벤트
▪
공통적인 이벤트: 얘네는 리액트로 말고 css로 해도 될듯
•
포커스시 밑줄 색 바뀜
•
포커스 아웃시 밑줄 색 반대로 바뀜
▪
다른 점: 포커스 아웃시 유효성 검사 여부
•
로그인만 유일하게 포커스 아웃시 유효성 검사가 진행되지 않음. 또한 만약 required가 없는 인풋이 있을 경우 포커스 아웃시 유효성 검사를 할 필요가 없음.
방안 1. 모든 경우의 수에서 다 활용할 수 있도록 만들기
장점: 재사용성이 높다
단점: 복잡하다.
function 라벨과인풋({라벨, 인풋어트리뷰트모음객체, 포커스아웃시이벤트}){
// 아래 코드는 일단 required가 있는 인풋 반환하나, required 여부에 따라 조건부 렌더링을 해야할거 같다.
return (
<label>
<span>{라벨}</span>
<input
type={인풋어트리뷰트모음객체.type}
placeHolder={인풋어트리뷰트모음객체.placeHolder}
... // 그 외 input 어트리뷰트들에 대해 더 생각해보기(minLength, maxLength, 등등)
/>
</label>
)
}
JavaScript
복사
방안 2. onBlur시 유효성 검사가 일어나느냐 여부에 따라 컴포넌트 쪼개기
장점: 기능에 따라 컴포넌트를 구분해서 덜 복잡하고 컴포넌트의 목적이 명확하다
단점: 구조가 비슷하고 이벤트시 동작만 좀 다른데 재사용성이 떨어진다
function 라벨과인풋포커스아웃시({라벨, 인풋어트리뷰트모음객체, 포커스아웃시이벤트}){
// 아래 코드는 일단 required가 있는 인풋 반환하나, required 여부에 따라 조건부 렌더링을 해야할거 같다.
return (
<label>
<span>{라벨}</span>
<input
type={인풋어트리뷰트모음객체.type}
placeHolder={인풋어트리뷰트모음객체.placeHolder}
... // 그 외 input 어트리뷰트들에 대해 더 생각해보기(minLength, maxLength, 등등)
/>
</label>
)
}
JavaScript
복사
function 라벨과인풋({라벨, 인풋어트리뷰트모음객체}){
// 아래 코드는 일단 required가 있는 인풋 반환하나, required 여부에 따라 조건부 렌더링을 해야할거 같다.
return (
<label>
<span>{라벨}</span>
<input
type={인풋어트리뷰트모음객체.type}
placeHolder={인풋어트리뷰트모음객체.placeHolder}
... // 그 외 input 어트리뷰트들에 대해 더 생각해보기(minLength, maxLength, 등등)
/>
</label>
)
}
JavaScript
복사
