compound component형태

 

현재 구현하려고 하는것은 

Calendar를 구현하려고 하고 있다. 

이것은 compound component 의 형태로 만들고 있는 것이었다. 

 

compound component란 무엇?

합성 컴포넌트 

자주쓰이는 것으로 예를 들어보면 

select와 option태그의 조합이 있다. 

select안에 option태그를 자식으로 넣게 되면 

그 자식으로 넣은 태그 만큼 select버튼을 클릭하면 밑에 option태그들이 생겨나게 된다. 

 

대표적인 compound component패턴인

select와 option엘리먼트 

 

<select>
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
  <option>Option4</option>
</select>

 

 

 

compound component를 왜 써야 하는가를 물어본다면 

뛰어난 사용성이 될 것이다. 

만일 일반 component형태로 사용하게  된다면, 

기능을 추가할 때마다 props로 넘겨주어야 하고,

또한 특정 컴포넌트는 이미 prop으로 넘겨줄 때 

위치가 정해져 있게 되어, 

 component를 사용하는 사용자가 제어를 할 수 없게 된다. 

 

그래서 사용자 측에서 특정 component를 사용할 때

특정 component의 위치를 지정하도록 한다면

 prop으로 설정하는 것보다는 

사용자의 가독성 측면에서도 좋고, 

쉽게 분리 할 수 있게 될 것이다

 

단점 

그러나 해당 컴포넌트는 

contextAPI 패턴을 구성해야하여 단순한 방식보다는 

구현이 복잡하다는 단점이 있으며, 

또한 props를 여러개 사용하는 대신이지만,

컴포넌트의 갯수를 많이 사용해야 해서 

사용성이 나빠질 수 있다. 

 

그러므로 장단점을 잘 고려해서 선택해야 할 것이다.