컴포넌트 분리's 정석

//App.jsx

import React from 'react';
import Modal from './components/modal';
import Button from './components/button';
import Input from './components/input';
import Select from './components/select';

function App() {

  return (
    <>
      <Button />
      <Input />
      <Select />
      <Modal />
    </>
  );
}

export default App;

// Button.jsx

import React from 'react';
import { StButton1, StButton2, StButton3, StButton4  } from './styled';
function Button() {
  
    };
    return (
        <div>
            <h1>Button</h1>
          
        </div>

    )
}

export default Button

import React, { useState } from 'react';

function Input() {

    return (
        <div>
            <h1>Input</h1>
            
        </div>
    );
}

export default Input;

import React, { useState, useRef } from 'react';
import { StModal1, StModal2  } from './styled';
import "../App.css";

function Modal() {

    return (
        <>
            <h1>Modal</h1>
          
        </>
    );
}

export default Modal;

import React from 'react';
import Select from 'react-select';
import { StSelect } from './styled';
import '../App.css';

function Select({options}) {

    return (
        <div>
            <h1>Select Boxes</h1>
            
        </div>
    );
}

export default Select;

// components > Styled.js
import styled from 'styled-components';

export const AppBody = styled.div`
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
`;

export const StBox = styled.div`
    width: 850px;
    height: ${(props) => props.h};
    border: 1px solid white;
    border-radius: 20px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;