[React] Component 모듈화 - 배우는중 (추가 수정 예정)

참고) component 모듈화

onChange를 쓰는데 왜 안되지? placeholder을 썼는데 왜 안되지? 했더니
input 컴포넌트를 모듈화하는 과정에서 props로 컴포넌트를 설정하면서 onchange, type, placeholder등 태그 관련 기능을 defaultProps로 넣어줘야 javascript에서 사용이 가능한 것 같다.

import styled from 'styled-components';
import React from 'react';

const Input = (props) => {
    const {  _onChange, type, placeholder, width, height, border, borderBottom, marginBottom } = props;
	const styles = {
    	width: width, 
    	height: height,
    	border: border,
    	borderBottom: borderBottom,
    	marginBottom: marginBottom,
    }
    
    return (
        <InputBox 
          type={type} 
          placeholder={placeholder} 
          onChange = { _onChange } ></InputBox>
    );
}
Input.defaultProps = {
    _onChange: () =>{} ,
    placeholder: "",
    type: "text",
    width: "300px", 
    height: "30px",
    border: "none";
    borderBottom: "1px solid #BE01E5",
    marginBottom: "10px",
    
}
const InputBox = styled.input`
    width: ${(props) => props.width};
    height: ${(props) => props.height};
    border: none;
	borderBottom: 
    margin-bottom: ${(props) => props.marginBottom};
`

export default Input;