나누는 이유는??
어떤 프로젝트든 UI에는 일정한 패턴을 두고 반복되는 요소들이 존재한다(예: header, footer, input등)
반복 되는것을 매번 개발하기보다는, 미리 만들어둔 요소를 재 사용하여 개발 리 소스를 줄일 수 있습니다.
유지 보수할때도 어느 부분이 잘못되었는지 알면 요소에 해당하는 컴포넌트 를 바로 찾아 갈 수 있습니다 (여기에 단점은 처음 보는 사람들이 헷갈려 할 수 있습니다(제 생각입니다))
나누는 기준
대부분에 컴포넌트는 데이터를 기반으로해 나눌수있습니다
1.서버로부터 받은 데이터를 관리한다.
서버 즉, api 요청으로 응답된 데이터나 부모 컴포넌트로 부터 주입받은 데이터를 관리한다.
2.데이터를 UI로 표현한다.
데이터를 컴포넌트에서 관리하고, 데이터를 UI로 뿌려준다
3.사용자로부터 이벤트 받는다.
사용자로부터 어떤 이벤트를 받는지 핸들러를 정의해 준다.
이벤트 핸들러에 사용자의 이벤트가 발생했을 때 어떠한 동작을 할지 명시해줄 수 있고, 이는 데이터를 조작하는 경우도 있다.
실제로 잘 추상화하여 만들어둔 컴포넌트를 재사용 함으로써 개발할 수 있는 경우가 많았습니다.
컴포넌트의 역할을 나열해 보았을 때 데이터 가 빠지지 않습니다.
컴포넌트를 데이터 기준으로 나눈뒤 역할을 기반으로 컴포넌트를 분리할 수 있습니다
분리
1.api폴더
인비즈넷의 경우 테스터 페이지,정산 페이지,홈페이지 별로 컴포넌트 생성
각각안에 axios의 인스턴스생성(api주소)하고 get,post등으로 구분
아래는 댓글에 관한 api 다
예시:
2.nav폴더
안에 header, footer등 페이지마다 기본적으로 들어가는 디폴트컴포넌트생성(어디든 임포트해 기본적으로 사용)
3.global폴더
input,createAT,modal등 기본적으로 자주 쓰이는 컴포넌트
4.compomemts
각각 페이지별로 compomemts폴더 아래 폴더를 하나 더 생성 (테스터 페이지, 홈페이지, 정산페이지)
생성된 폴더안에 페이지에 main화면에 들어갈 컴포넌트를 분리해 생성
5.view
api폴더,nav폴더,global폴더,compomemts 집합하여 만든 화면 최상위 부모컴포넌트