How can I split components?

I created 1 Components.
but I want split them....

How to split component?


My Component Code is :

<aura:component controller="AccountListController" implements="force:appHostable" >
    <aura:attribute name="accounts" type="List"/>
    <aura:attribute name="pageSize" type="Integer" default="5"/>
    <aura:attribute name="pageNumber" type="Integer" default="1"/>
    <aura:attribute name="searchName" type="String"/>
    <aura:attribute name="totalPage" type="Integer" default="1"/>

  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <c:ListSearch/>
    
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="검색">검색</div></th>
        <th scope="col"><div class="slds-truncate" title="버튼">버튼</div></th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td><div class="slds-truncate" title="{!v.searchName}">
              <lightning:input name="SearchName" label="SearchName" value="{!v.searchName}"/>
              </div></td>
          <td><div class="slds-truncate" title="검색버튼">
              <lightning:button variant="brand" label="Search" onclick="{!c.search }" />
              </div></td>
        </tr>
    </tbody>
  </table>
    
    
    <br></br>
    
  <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
        <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
      </tr>
    </thead>
    <tbody>
      <aura:iteration items="{!v.accounts}" var="account">
        <tr>
          <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
          <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
    
    
    
   <div align="center">
              <lightning:button variant="brand" label="First" onclick="{!c.first }" />
              <lightning:button variant="brand" label="Prev" onclick="{!c.prev }" />
       <ui:outputText value="{!v.pageNumber}" />/<ui:outputText value="{!v.totalPage}" />
              <lightning:button variant="brand" label="Next" onclick="{!c.next }" />
              <lightning:button variant="brand" label="Last" onclick="{!c.last }" />

    </div>
    
    
</aura:component>

and Controller is :
 

({
    doInit: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: component.get("v.pageNumber")
        });
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
    });
    $A.enqueueAction(action);
        
    var action2 = component.get('c.getTotalPage');
    action2.setCallback(this, function(actionResult) {
     component.set('v.totalPage', actionResult.getReturnValue());
    });

    $A.enqueueAction(action2);
  },
    search: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: component.get("v.pageNumber"),
            name: component.get("v.searchName")
        });
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
    });
    $A.enqueueAction(action);
        
        var action2 = component.get('c.getTotalPage');
        action2.setParams({
            name: component.get("v.searchName")
        });
    action2.setCallback(this, function(actionResult) {
     component.set('v.totalPage', actionResult.getReturnValue());
    });

    $A.enqueueAction(action2);
  } , 
    next: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
    var next = component.get("v.pageNumber") + 1;
    component.set('v.pageNumber', next);
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: component.get("v.pageNumber"),
            name: component.get("v.searchName")
        });
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
        component.set('v.firstC', false);
    });
    $A.enqueueAction(action);
  }, 
    prev: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
    if(component.get("v.pageNumber")>1)
    {
        var next = component.get("v.pageNumber") - 1;
        component.set('v.pageNumber', next);
    }
    
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: component.get("v.pageNumber"),
            name: component.get("v.searchName")
        });
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
        if(component.get("v.pageNumber")==1) {
            var btn = event.getSource();
			btn.set("v.disabled",true);
        }
    });
    $A.enqueueAction(action);
  }, 
    first: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
   	component.set('v.pageNumber', 1);    
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: 1,
            name: component.get("v.searchName")
        });
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
        if(component.get("v.pageNumber")==1) {
            var btn = event.getSource();
			btn.set("v.disabled",true);
        }
    });
    $A.enqueueAction(action);
  }, 
    last: function(component, event, helper) {      
    var action = component.get('c.getAccountList');
   	component.set('v.pageNumber', component.get("v.totalPage"));    
    component.get("c.getAccountList");
        action.setParams({
            pageSize: component.get("v.pageSize"),
            pageNumber: component.get("v.totalPage"),
            name: component.get("v.searchName")
        });
    action.setCallback(this, function(actionResult) {
        component.set('v.accounts', actionResult.getReturnValue());
        component.set('v.firstC', false);
    });
    $A.enqueueAction(action);
  }
    
    
})

and Apex Controller is :
 

public class AccountListController {
	@AuraEnabled
    public static List<Account> getAccountList (Integer pageSize, Integer pageNumber, String name) {
        
        String sName = '%' + name + '%';
        Integer size = integer.valueof(pageSize);
        Integer page = integer.valueof(pageNumber) - 1;
        Integer offsetSize = size * page;
        
        if(name==null){
            return [SELECT Id, Name, Phone FROM Account LIMIT :size OFFSET :offsetSize];
        }
        
        return [SELECT Id, Name, Phone FROM Account Where Name Like :sName LIMIT :size OFFSET :offsetSize];
     }
    
    @AuraEnabled
    public static Integer getTotalPage (String name) {
        String sName = '%' + name + '%';
        List<Account> aList = new List<Account>();
        if(name==null){
            aList = [SELECT Id, Name, Phone FROM Account];
        } else {
        aList = [SELECT Id, Name, Phone FROM Account Where Name Like :sName];
		}
        Integer flag = math.mod(aList.size(), 5);
        if(flag>0) {
           return aList.size()/5+1; 
        }
        return aList.size()/5;
        
     }
    
    
   
  }

I want split Component.

1. List Search Component
2. List View Component
​3. List Pagination Button Component
4. This Component is include 1, 2, 3

Are you busy? then Teach me just once.