TIL # 66 < CustomButton, CustomInput, CustomModal >

Button과 Input,Modal을 재사용하려고 CustomButton, CustomInput, CustomModal을 만들어보았다.

 

CustomButton

import React from 'react';
import styled from 'styled-components';
interface CustomButtonProps {
  children: React.ReactNode;
  onClick: () => void;
  width?: string;
  height?: string;
  backgroundColor?: string;
}
const Button = styled.button`
  padding: 10px 20px;
  background-color: ${(props: CustomButtonProps) =>
    props.backgroundColor || '#4CAF50'};
  color: white;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-top: 10px;
  width: ${(props: CustomButtonProps) => props.width || '100%'};
  height: ${(props: CustomButtonProps) => props.height || '100%'};
`;
const CustomButton: React.FC<CustomButtonProps> = ({
  children,
  onClick,
  width,
  height,
  backgroundColor,
}) => {
  return (
    <Button
      onClick={onClick}
      width={width}
      height={height}
      backgroundColor={backgroundColor}
    >
      {children}
    </Button>
  );
};
export default CustomButton;

다른 컴포넌트에서 사용방법

<CustomButton
          onClick={() => console.log('Button clicked!')}
          width="100px"
          height="50px"
          backgroundColor="black"
        >
          Click me
        </CustomButton>

 

CustomInput

 

 

import React, { useState } from 'react';
import styled from 'styled-components';
interface CustomInputProps {
  placeholder?: string;
  width?: string;
  height?: string;
}
const Input = styled.input<CustomInputProps>`
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 10px;
  width: ${props => props.width || '100%'};
  height: ${props => props.height || '100%'};
`;
const CustomInput: React.FC<CustomInputProps> = ({
  placeholder,
  width,
  height,
}) => {
  return (
    <Input
      type="text"
      placeholder={placeholder}
      width={width}
      height={height}
    />
  );
};
export default CustomInput;

 

다른 컴포넌트에서 사용방법

<CustomInput
          placeholder="Enter your name"
          width="200px"
          height="50px"
        />

 

login form, validation 등 비슷한 로직이 여러 컴포넌트에서 쓰이는 경우가 있는데 이럴 경우 중복되는 로직을 유틸 함수와 같은 느낌으로 커스텀 훅을 만들어 중복 로직을 최소화 시킬수 있을것 같다.

 

CustomModal

 

import styled from 'styled-components';

interface Props {
  width?: string;
  height?: string;
  children?: React.ReactNode;
}

const Modal: React.FC<Props> = ({ width, height, children }) => {
  return (
    <>
      <Overlay>
        <ModalContainer width={width} height={height}>
          {children}
        </ModalContainer>
      </Overlay>
    </>
  );
};

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
`;

const ModalContainer = styled.div<Props>`
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: ${props => props.width || '80%'};
  height: ${props => props.height || '80%'};
  max-height: 500px;
  overflow: hidden;
`;

export default Modal;

다른 컴포넌트에서 사용방법

 

function example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  
  // 스크롤 숨기는 로직
  useEffect(() => {
    document.body.style.overflow = show ? 'hidden' : 'scroll';
    return () => {
      document.body.style.overflow = 'scroll';
    };
  }, [show]);
  
  return(
  <>
<button onClick={handleShow}>Open Modal</button>
        {show && (
          <Modal width="30%" height="30%">
            <p>모달창입니다.</p>
            <CloseButton onClick={handleClose}>close</CloseButton>
          </Modal>
          </>
        )}
        )