[ 프론트엔드 ] 컴포넌트 , nextjs 설계 방식

컴포넌트 지향은 프론트 할 때 가장 기본이 되는 사고방식이다. 컴포넌트는 재사용 가능한 부품을 나타내고 컴포넌트 조합을 통해 ui를 구현하는 것이 컴포넌트 지향 방식이다. 

컴포넌트 설계를 확실하는 것이 중요하다. 

컴포넌트 설계의 장점은 재사용성과 가독성, 쉬운 테스트 이다. 

컴포넌트는 가능한 추상적이어야 한다. 서비스나 기능 고유의 UI부품을 구현해버리면 재사용성이 낮아져 버려 컴포넌트의 장점을 얻을 수 없다. 예를 들어 소셜로그인 버튼을 구현한다고 하면, 버튼은 아이콘+버튼 컴포넌트로 이루어져 있다. 실제로 구현할때는 GoogleButton으로 만드는 것이 아니라 IconLabelButton이라는 미래의 다른 소셜연동을 지원할때 재사용할 수 있는 형태가 바람직하다. 

각 종류의 인증을 모두 구현하는 것이 아닌 , 하나의 인증용 버튼은 컴포넌트로서 구현하고, 그 컴포넌트에 대해 아이콘과 라벨의 정보를 외부에서 전달해 구현하는 방식을 사용해야 한다 

 

다음에는 이러한 컴포넌트 상태관리 

즉, 컴포넌트를 가지고 데이터를 다룰떄 사용하는 props와 state에 관해 알아보겠다.