React ) 최소단위 elements 만들기 (ex.input)

로그인이나 회원가입에 들어가는 input이(아이디 비밀번호 입력칸) html tag element로만 하기에는 너무 모양이나 양식이 똑같아서 공통 component로 하나 만들어주기로 하였다~

src 폴더안에 elements라고 폴더를 하나 만들어주고 공통으로 자주 쓰이는 것들을 이미 만들어 준것이 있는데
( src-> elements -> Button.js / Grid.js / Input.js / Text.js / index.js 으로 뽑았다 )
여기서 index.js는 뭐냐면

//index.js
import Input from "./Grid";
import Input from "./Input";
import Button from "./Button";
import Spinner from "./Spinner";

export {Grid,Input,Button,Spinner};

이런식으로 elemets들 안에있는 컴포넌트들을 모아놓고 필요한곳에서 쓸때는

import {Button, Grid} from '../elements/index'

이렇게 임포트해서 쓰면 되는거당

이제 이것들중 Input 컴포넌트를 만들어보자!
1. 필요한것들 import 하기 : react , styled-components
2. 컴포넌트 만들어주기 : const Input = (props) => { return () };
3. Input을 만들었으면 Input에 해당하는 기본적으로 받아와야 하는 것들을 미리 넣어준다

Input.defaultProps ={
	label : '텍스트',
    placeholder : '텍스트를 입력해주세요',
    
    //text입력시 변하는 값을 얘의 부모 컴포넌트가 알아야하니까 (변한값으로 어떤 액션을 취하려면) 
    _onChange로 콜백함수 받아온다.
    
   _onChange : () => {}
};

4.export default Input; 하고 index.js에 Input import해서 추가해준다
5. Input 컴포넌트에서 프롭스로 받아온거 변수 설정하고 따로 빼준다

const Input = (props) => {
	const {label ,placeholder, _onChange } = props;
return( 
	<React.Fragment>
    	{label}
        <input placeholder = {placeholder} onChange={_onChange}/>
    </React.Fragment>
)}
const {label,placeholder, _onChange} = props;

6. input tag를 styled component로 만들어준다

const ElInput = styled.input `
	border : 1px solid #212121;
    width : 100%;
    padding: 12px 4px;
    box-sizing : boder-box;
`;

  <input placeholder = {placeholder} onChange={_onChange}/> 
  ->
  <ElInput placeholder = {placeholder} onChange={_onChange}/>
  

이렇게 설정하면 Input 컴포넌트 완성!
필요한곳에 이렇게 쓰면된다.

//Login.js
import React from 'react';
import classes from "./Login.module.css";
import { Input,Button } from "../element/index";

const Login = (props) => {

    return (
        <div className={classes.wrap}>
            <Input label='아이디' placeholder='아이디를 입력해주세요' />
            <Input label='비밀번호' placeholder='비밀번호를 입력해주세요'/>
        </div>
    );
};

export default Login;