소개

React의 세계에서 가장 유용하고 널리 사용되는 개념 중 하나는 코드가 확장 가능성을 유지하고 우리가 만든 구성 요소에 추가 의미를 부여하는 데 도움이되므로 설계 패턴입니다.

다양한 패턴이 있으며이 기사에서는 유연하고 합성 가능한 인터페이스를 만드는 데 특히 유용한 고급 패턴 인 복합 구성 요소 에 대해 논의합니다.

복합 성분이란 무엇입니까?

화합물 구성 요소는 React의 고급 패턴입니다. 목표는 구성 요소 그룹간에 상태 및 논리를 공유함으로써보다 유연한 설계를 만드는 것입니다. 이런 식으로, 부모 구성 요소와 자식 구성 요소 간의 의사 소통은 유연한 방식으로 달성 될 수 있습니다.

구성 요소는 복잡한 소품 나무 나 미래에 리팩터링하거나 이해하기 어려운 지나치게 복잡한 논리를 만들지 않고 특정 행동을 달성하기 위해 함께 작동합니다.

이 패턴은 여러 구성 요소 레이어를 통해 많은 수의 소품을 전달하는 소품 드릴링을 제거하는 데 도움이됩니다. 각 주 변경이 모든 아동 구성 요소를 업데이트하기 때문에 주정부가 업데이트 될 때마다 불필요한 재 렌즈를 유발할 수 있으므로 Prop Drilling은 문제가 될 수 있습니다.

복합 구성 요소의 예는 선택 및 옵션 태그의 HTML 구조에서 볼 수 있습니다 :

선택 요소는 인터페이스의 상태 관리자로 작동하는 반면 옵션 요소는 선택 구성 요소가 작동하는 방식을 구성합니다.

복합 성분을 사용한 예

이 예에서는 모달을 만듭니다.이 모달은 토글과 컨텐츠의 두 가지 복합 구성 요소로 나뉩니다. 그들은 모달의 열린/닫기 상태를 공유 할 것입니다.

이 구성 요소를 단계별로 만드는 방법을 살펴 보겠습니다 :

우리는 모달의 열린/닫기 상태를 관리 할 컨텍스트를 만들어 시작할 수 있습니다 :

모달 구성 요소의베이스 생성 :

우리는 아이들을 사용하여 모달 안에 배치 될 구성 요소를 잡고 있음을 알 수 있습니다. 우리는 다음과 같이 사용하고 싶습니다 :

이제 우리는 토글 구성 요소를 만들어야합니다.

우리는 또한 모달의 컨텐츠를 표시 할 책임이있는 컨텐츠 구성 요소가 필요합니다 :

마지막으로, 우리는 두 구성 요소를 모달 구성 요소에 추가 할 수 있으며 갈 준비가되었습니다! ?

용법:

결과:

이 방법으로, 우리는 모달을 만들고 사용하여 매우 유연하고 재사용 할 수 있습니다. modal.toggle은 모달 디스플레이를 트리거하는 책임이 있으며 Modal.Content는 모달 컨텐츠를 표시해야합니다.

이 구조는 개발자가 응용 프로그램의 특정 요구에 따라 모달의 동작과 내용을 쉽게 사용자 정의하여 코드를 더 깨끗하고 구성 할 수 있습니다.

다른 예

우리는 다음과 같은 다른 상황에서 복합 구성 요소를 사용할 수 있습니다.

아코디언 구성 요소 :

메뉴 구성 요소 :

이 모든 예제는 유연하고 적응력이 뛰어나 개발, 확장 성 및 구성 요소 사용을보다 쉽게 ​​만듭니다.

운동

닫기 버튼이 컨텐츠 구성 요소 내부에 배치 된 것을 알았지 만 모달 닫기를 관리하는 데 전용 구성 요소가있는 것이 흥미로울 것입니다. close 와 같은 것을 만들 수 있습니다. 이 구성 요소를 실험하고 추가 해보십시오!

결론

복합 구성 요소 패턴을 사용한 구성 요소 작성이 응용 프로그램에서 유용 할 수있는 방법을 보았습니다. 우리는 또한 그것을 구현하는 방법을 탐색 하고이 패턴에 맞는 위치의 예를 검토했습니다.

화합물 구성 요소를 사용하여 구성 요소 생성을 자유롭게 탐색하고 실험하십시오. 현명하게 사용하고 컨텍스트에 적용하는 것이 합리적인지 평가하는 것이 좋지 않은 경우에 도움보다 더 많은 방해가 될 수 있습니다.

참고 : 나는 React Universe의 개발자들이 만든 기사를 모은 BR 리포지토리 인 React4Noobs 에이 동일한 내용을 게시했습니다. 체크 아웃 할 가치가 있습니다!