내일배움캠프 4기 React 42일차(만능버튼, 유효성검사, confirm, form태그 주의 )

1. 만능버튼

말만 만능버튼이지 만능이 아닌듯 싶다.
css 가 다 다른 버튼들에는 오히려 더 많은 입력을 불러 일으켜서 이번 프로젝트땐 비효율 적인것 같다.
css가 같은게 여러개일때 사용하면 좋을 것 같다.

import styled from 'styled-components';

export default styled.button`
  width: 60px;
  height: 40px;
  color: ${(props) => props.color};
  background-color: ${(props) => props.backgroundcolor};
  left: ${(props) => props.left};
  margin-left: ${(props) => props.marginleft};
  border-radius: 20px;
  border: transparent;
  position: relative;
  cursor: pointer;
`;


<CustomButton
    color={(props) => props.theme.colors.reversetextcolor}
    backgroundcolor={(props) => props.theme.colors.pointcolor}
    left="37%"
    onClick={onClickAddHint}
    >
  	확인
</CustomButton>

const 함수로 사용하게 되면 onclick 이벤트의 인자들을 각각 또 props 로 받아 실행시켜줘야해서 바로 export 해주었다.

프로젝트에 hint에 해당하는 버튼 외엔 각각 사이즈나 색, 크기가 모두 달라서 주어야 하는 값이 너무 많아져 hint로 줄였다.

또 광역 props 로 전달 해 주는 css는 {} 로 처리하여 보내주었다.

---- 수정

import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';

const CustomButton = (props) => {
  // eslint-disable-next-line default-case
  switch (props.name) {
    // AddHint.jsx
    case 'AddButton':
      return <AddButton onClick={props.onClickAddHint}>확인</AddButton>;

    // Detail.jsx
    case 'updateButton':
      return <AddButtonn onClick={props.updateButton}>수정</AddButtonn>;
    case 'deleteButton':
      return <AddButtonn onClick={props.deleteButton}>삭제</AddButtonn>;

   
export default CustomButton;

const AddQuestionIcon = styled.img`
  width: 24px;
  height: 24px;
`;

팀원분이 만드신 만능버튼이다.
props를 보낼 child태그에 'name' 을 가져와서
switch-case 로 각 case 인 경우 적용할 styled-components 와
문자형식을 조정했다.
onClick 이벤트 같은경우 함수 자체를 props로 받아와서 실행시켰다.

2. 유효성 검사, confirm

 const onClickDeleteHintButtonHandler = (Id) => {
    if (writer.replace(/ /g, '') === '') {
      alert('이름를 입력해주세요!');
      focusWriter.current.focus();
      return;
    } else if (hint.writer !== writer) {
      alert('이름이 틀렸습니다!');
      return;
    } else if (password.replace(/ /g, '') === '' || password.length !== 4) {
      alert('비밀번호는 4자리 숫자로 입력해주세요!');
      focusPassword.current.focus();
      return;
    } else if (hint.password !== Number(password)) {
      alert('비밀번호가 틀렸습니다!');
      return;
    } else if (window.confirm('정말 삭제하시겠습니까??') === true) {
      //확인
      dispatch(__deleteHint(Id));
    } else {
      //취소
      return;
    }
  };

삭제 핸들러를 가져와 보았다.

유효성 검사는 간단한 정규식으로 해결하였다.
정규식은 아직 너무 어려워서 검색으로 해결!

confirm은 무엇인가 클릭 하였을때 확인, 취소를 선택하여 한번더 confirm 받는다.

확인을 클릭했을때 이벤트 함수를 실행시켜 삭제가 일어나고
취소했을땐 return 하여 되돌아 간다.

주의!!!!!
confirm 을 사용하는 버튼에 form태그로 감싸져 있다면 꼭 form 태그의
새로고침을 막아주어야한다.
그렇지 않으면 버튼을 누르는 순간 이미 새로고침이 실행되어
confirm 의 확인, 취소의 클릭에 상관없이 무조건 새로고침이 일어나게 된다.