[React] 복잡한 컴포넌트 제작

아무리 복잡한 사용자 인터페이스래도 단순하고, 이해하기 쉽게 만들수 있는 체계적인 방법이 있다.

>>

1. 주요 비주얼 요소의 식별

 >> 쪼개기 

2. 컴포넌트로 만들 대상의 선별

 >> 식별한 비주얼 요소 중에 어떤 것을 컴포넌트로 만들지 따져봐야 한다. 모든 비주얼 요소를 컴포넌트로 만들 필요는 없으며, 반대로 극도로 복잡한 몇개의 컴포넌트만 만드는것도 좋지 않다.

 >> 하나의 컴포넌트는 하나의 역할만 해야 한다.

3. 총 3개의 컴포넌트로 나눴다.  전체의 큰 Frame역할인 Card, 색상을 보여주는 Square, 글씨를 보여주는 Label

 

 

이제 하나씩 채워 가보도록 하자

1. 프레임 역할을 하는 Card를 채워보자

  >> cardStyle 객체를 생성하여 div 에 Style적용을 시켜주었다.

다음으로 Square를 채워보도록 하자

Square 컴포넌트를 출력하려면 ReactDOM.render에서 호출하는게 아니라 Card 컴포넌트 안에서 Square컴포넌트를 호출한다.

 >> Card 컴포넌트 안에서 Square 컴포넌트를 호출 했다는 사실은 컴포넌트의 결합성을 보여주는 하나의 예이다. 최종적으로 두 컴포넌트가 결탁한 결과를 볼수 있다는 것이다.

마지막으로 Label 컴포넌트를 채워보자

라벨 컴포넌트 또한 Card 컴포넌트 안에서 보여야하므로 Card 컴포넌트에서 호출해 준다.

 

 

지금보면 Square와 Label의 컬러 값이 하드 코딩되어 있다 이것을 속성 값을 통해 변경하도록 바꿔보자

 >> 자식 컴포넌트에 속성 값을 전달하는 올바른 방법이란, 부모 컴포넌트 각각이 속성 값을 일일이 전달해 주는 것을 의미한다.

 

<Card color="#~~~"> 부모 속성으로 들어간 color를  자식 컴포넌트인 Square, Label 이 {this.props.color} 를 통해서 받아서 사용하고 있다. 즉 color 속성이 오직 Square, label 컴포넌트에서만 사용됨에도 불구하고 부모인 Card 컴포넌트는 그 속성을 전달해야할 책임이 있다.