•
기능
◦
모든 인풋창에서 유효성 검사가 통과돼야 활성화됨 - 로그인 화면시 버튼과의 기능 차이점
◦
클릭시 폼이 제출되는 기능
function 버튼1({텍스트, 활성화여부, 연결하는폼의아이디}){
// 활성화 여부에 따라 스타일이랑 클릭 못하게 막기
return <input type="submit" form={연결하는폼의아이디} value={btnText}/>
}
JavaScript
복사
•
고민되는 점
◦
일단 Profile modification의 저장 버튼은 완전 기능 동일한데 스타일 다름. 그리고 API도 다름(얘는 PUT)
◦
add product의 경우 만약 동일한 조건에서 유효성 검사하고 동작하게 설정한다면 기능은 동일한데 스타일 다름. 그리고 API도 다름(얘는 POST)
•
버튼 나누기
◦
API 명세에 따라?
◦
아니면 어차피 버튼이 클릭되는거라기 보다는 폼이 제출될 때 폼에 입력됐던걸 다 모아서 서버에 반영해야 하니까, 버튼 자체에는 이벤트를 안 걸것이고, 버튼의 타입이 “submit”이라는 점만 반복되므로 버튼은 재사용 목적의 공통 컴포넌트로 만들고 form에 이벤트 걸기 ⇒ 그 후 form이 제출되는 이벤트가 발생했을 때 API 이용하는건 어떨까?