프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법

Tags

Top Highlights

• 재사용성과 복잡성

• 가독성을 개선하고 유지보수

• 하나의 컴포넌트에 여러 책임을 추가

• 비지니스 로직을 컴포넌트에 추가한다.

• 재사용이 가능하다는 건 그만큼 일반적이라는 걸 의미

• 포괄적

• 보편적

• ‘다른 컴포넌트가 가져가서 사용할 수 있도록 보편적인 속성을 갖고 있는가?’를 고려

• HTML을 포함하고 있다는 사실을 까먹을 때가 종종 있습니다.

• SomethingComponent는 리스트 요소 말고 다른 곳에서도 사용할 수 있기 때문입니다.

• li 요소 바로 아래에 구성하는 게 아니라 다른 적당한 요소를 사용

• 컴포넌트를 분리할 때 HTML 요소들이 주변 문맥에 크게 의존적이지 않을수록 좋습니다.

• 컴포넌트의 재사용성에 대해 말할 땐 보통 중복을 떠올립니다. 두 곳 이상에서 중복된 무언가 존재하고 ‘추출’하는 과정을 거칩니다. 그리고 추출한 것을 재사용합니다.

• 둘 이상의 컴포넌트에서 사용할 재사용 가능한 컴포넌트를 만들 때 가장 큰 특징 중 하나는 조건문 입니다.

• 상위 컴포넌트와 하위 컴포넌트가 강하게 결합했기 때문입니다.

• 의존성

• 가장 먼저 컴포넌트가 반환하는 요소의 중복을 추출해서 재사용해야 한다는 접근 방법이 문제의 발단일 수 있습니다.

• 중복 제거와 관련된 DRY 원칙⁸은 중복을 겉모습으로 판단하지 않습니다. 만약 모습이 같은 두 코드가 같은 이유로 수정된다면 그 코드는 중복입니다. 하지만 같은 모습의 코드라도 수정의 이유가 다르다면 두 코드는 중복이 아닙니다.

• 강한 결합

• 재사용하려는 컴포넌트에는 정말 공통적인 것들만 남겨두고 사용하는 컴포넌트의 고유한 것은 속성으로 전달하는 것입니다.