React 구성 요소를 만드는 것으로 배운 두 가지 교훈

다음은 React 구성 요소를 구축 하지 않는 방법에 대해 배운 몇 가지 교훈입니다. 이것들은 지난 몇 달 동안 만난 것들이며, 디자인 시스템, 특히 레거시 기술 결정과 많은 기술 부채가있는 디자인 시스템에서 일하고 있다면 관심이 있다고 생각했습니다.

제 1과 : 최대한 어린이 구성 요소를 피하십시오.

많은 구성 요소가있는 큰 설계 시스템에서 작업하는 데있어 한 가지는 다음 패턴이 결국 문제 가되기 시작한다는 것입니다.

 
  <crec.header> 제목 
  <card.body> <p> 이것은 일부 내용입니다 </p> </card.body>입니다
카드></crec.header>

문제가있는 부분은 어린이 구성 요소, 카드 및 카드 및 카드입니다. 이 예는 상황이 비교적 간단하기 때문에 끔찍하지 않습니다. 구성 요소가 더 복잡 해져서 상황이 발생할 수 있습니다. 예를 들어, 각 어린이 구성 요소는 다른 구성 요소를 다른 일련의 복잡한 소품을 가질 수 있습니다.

내 가장 큰 고통 포인트 중 하나는 양식 구성 요소입니다. 이것을 가져 가십시오 :

제출 취소

물론 물건을 상당히 단순화하고 있지만 엔지니어가 서로 옆에 두 개의 버튼을 배치하기를 원할 때마다 페이지에 양식이 없더라도 양식을 가져올 수 있습니다. 이는 양식 구성 요소 내부의 모든 것이 가져 오게되며 궁극적으로 성능에 좋지 않다는 것을 의미했습니다. 그것은 단지 시스템 설계 구현도 나쁜 것입니다.

이렇게하면 구성 요소를 문서화 할 때도 상황이 더욱 어려워집니다. 이제 이러한 각 어린이 구성 요소도 문서화되어야하기 때문입니다.

따라서 자식 구성 요소를 형성하는 대신, 우리는 그것을 새로운 구성 요소로 만들어야합니다. 그렇게하면 항상 양식을 가져올 필요가 없으며 레이아웃 기반 구성 요소를 다른 구성 요소와 별도로 유지할 수 있습니다.

나는 내 교훈을 배웠다. 여기서부터 나는 내가 할 수있는 곳을 완전히 피할 것입니다.

레슨 2 : 소품이 서로 충돌하지 않도록하십시오.

Mandy Michael은 소품이 어떻게 서로 충돌하고 어떻게 모든 종류의 혼란스러운 갈등을 유발할 수 있는지에 대한 훌륭한 작품을 썼습니다.

 인터페이스 소품 {
  Hidemedia? : 부울
  MediaisedGetoEdge? : 부울
  MediafullHeight? : 부울
  videoinline? : 부울
}

Mandy는 다음과 같이 씁니다.

이 소품의 목적은 이미지 나 비디오가 카드 내에서 렌더링되는 방식을 변경하거나 미디어가 전혀 렌더링되는 경우를 변경하는 것입니다. 별도로 정의하는 문제는 구성 요소 기능을 전환하는 여러 플래그로 끝나는 것입니다. 그 중 다수는 상호 배타적입니다. 예를 들어, 여백이 숨겨져있는 경우 이미지를 채우는 이미지를 가질 수 없습니다.

이것은 팀의 디자인 시스템에서 상속받은 많은 구성 요소에게는 확실히 문제였습니다. 부울 소품이 구성 요소가 모든 종류의 이상하고 예기치 않은 방식으로 행동하게하는 많은 구성 요소가있었습니다. 엔지니어는 주어진 효과에 대해 어떤 소품을 켜고 꺼질 지 알지 못하기 때문에 개발 중에 카드 구성 요소에 모든 종류의 버그가 나타났습니다!

Mandy는 다음 솔루션을 제공합니다.

 유형 mediaMode = 'Hidden'| 'edgetoedge'| 'FullHeight'

인터페이스 소품 {
  미디어 모드 : '숨겨진'| 'edgetoedge'| 'FullHeight'
}

간단히 말해서, 우리가 이러한 초기 옵션을 모두 결합하면 쉽게 확장 할 수 있고 미래에 혼란을 일으킬 가능성이 적은 훨씬 더 깨끗한 API가 있습니다.

그게 다야! 나는 그 두 교훈에 대해 간단히 기록하고 싶었습니다. 내 질문은 다음과 같습니다. 구성 요소를 만들거나 디자인 시스템 작업을 할 때 무엇을 배웠습니까?

위 내용은 React 구성 요소를 만드는 것으로 배운 두 가지 교훈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!