스타일드 컴포넌트 이벤트 전달 방법

1. 타입을 지정하고

 

const AttachmentButton: React.FC<AttachmentButtonProps> =

 

2. 프롭스를 매개변수로 넣고

 

const AttachmentButton: React.FC<AttachmentButtonProps> = ({ children, onChange }) => {

 

3. 매개변수를 이용할 위치를 정하고

 

const AttachmentButton: React.FC<AttachmentButtonProps> = ({ children, onChange }) => {

  return (

    <Label>

      <FileInput type="file" id="file" onChange={onChange} multiple />

      <RadiusButton>{children}</RadiusButton>

    </Label>

  );

};

 

4. 속성을 주면 된다

 

      <AttachmentButton onChange={handleChangeFile}>대화 추가하기</AttachmentButton>

 

 

import React from "react";
import styled from "styled-components";
import RadiusButton from "../atoms/Button";

const Label = styled.label`
  margin: 0 auto;
  border-radius: 30px;
`;

const FileInput = styled.input`
  display: none;
`;

interface AttachmentButtonProps {
  children: React.ReactNode; // children prop을 추가
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const AttachmentButton: React.FC<AttachmentButtonProps> = ({ children, onChange }) => {
  return (
    <Label>
      <FileInput type="file" id="file" onChange={onChange} multiple />
      <RadiusButton>{children}</RadiusButton>
    </Label>
  );
};

export default AttachmentButton;