[React] 컴포넌트는 한 번에 하나의 책임만 진다.

🐾들어가며

상황:

라이브러리를 만들면서 컴포넌트를 사용할 때 개발자가 어떻게 쓰면 좋을지 먼저 생각했습니다. 그래서 실제로 사용할 때의 예시를 먼저 작성하곤 합니다.

✨본격적으로

이번에 TipBox를 만들면서 다음과 같은 코드를 생각했습니다.
tooltips과 popover tips를 합쳐서 TipBox라고 부르기로 했습니다.

//popver 속성을 넘기면 dialog 형태의 툴팁이 나온다.
<Hint popover>
  <Hint.Target>
    <Button>feature</Button>
  </Hint.Target>
  {/* popover 속성이 있는 Hint 내부에서 show와 hide 각각을 가진 두개의 Trigger를 사용해야 한다. */}
  <Hint.Trigger show>
    <Icon src="" alt="more info"></Icon>
  </Hint.Trigger>
  {/* Content는 툴팁이 뜨는 위치를 prop으로 받는다. */}
  <Hint.Content top center>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore ab adipisci
    sed. Molestias facilis magnam ut minus distinctio illum cum rem
    exercitationem. In vitae laboriosam expedita obcaecati illum tenetur iste.
  </Hint.Content>
  <Hint.Trigger hide>X</Hint.Trigger>
</Hint>;



//popover 속성이 없거나 false일 경우, Hint.Content의 내용은 Hint의 title 속성에 할당된다.
<Hint>
  {/* show hide 둘 다 받거나 둘 다 없는 Trigger가 하나만 있어야 한다. */}
  <Hint.Trigger show hide>
    <Button>feature</Button>
  </Hint.Trigger>
  {/* popover 속성이 없을 땐 Hint.Content는 plain text만 받을 수 있다. */}
  <Hint.Content top center>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore ab adipisci
    sed. Molestias facilis magnam ut minus distinctio illum cum rem
    exercitationem. In vitae laboriosam expedita obcaecati illum tenetur iste.
  </Hint.Content>
</Hint>;

문제:
하나의 컴포넌트가 popover 속성에 의해 좌우되는 두 가지 역할로 사용하려고 했습니다.
SOLID 원칙을 생각하면 정말 안 좋은 컴포넌트임을 깨달았습니다.

해결:
따라서 두 컴포넌트를 별도로 만들고 Hint 컴포넌트로 응집하려고 합니다.

결과:
tooltips

    <Hint title="Lorem" position="top">
      feature
    </Hint>

popovertips

    <Hint popover>
      <Hint.Target>feature</Hint.Target>
      <Hint.Trigger>?</Hint.Trigger>
      <Hint.Content>
        <Hint.Panel>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda,
          nisi incidunt culpa voluptatum nihil ex sunt. Vel nesciunt eius sed
          minima illo laborum vero accusantium. Facilis voluptate numquam ut
          magnam!
        </Hint.Panel>
        <Hint.Button>close</Hint.Button>
      </Hint.Content>
    </Hint>

사실 여기에서 Hint로 쓰는 것이 아닌 각각 Tooltips와 Popovertips라는 별도의 컴포넌트로 사용하는 것이 바람직합니다. 다만, 제가 생각한 Hint 컴포넌트의 책임은 하나의 컴포넌트로 두 가지를 모두 사용해볼 수 있게 하는 것입니다. ( 사실 시간이 없기도 했고... ) 그래서 위와 같이 코드를 작성할 수 있게 하는 것으로 만들었습니다...ㅎㅎ

✔️결론

리액트 UI를 만들어보면서 실제로 일주일 안에 하나의 UI만 구현하는 것은 정말 쉽습니다. 사실 뻘짓만 안하면 3시간 안에 만들 수 있습니다. 그렇지만, 접근성과 컴포넌트 간의 의존성과 재사용성을 고려하면서 다시 만들고 다시 만들고를 반복하다 보니 시간이 좀 오래 걸리고, 구현한 내용을 글로 정리하면 또 아쉬운 부분이 눈에 보입니다. 그래도 다음 UI를 만들기 위해 todo로 생략하고 넘어가고 있고, 중요한 점에 집중하려고 합니다. 화이팅!!