📚금일 학습 내용

툴팁 컴포넌트 추상화 해보기

💬툴팁 컴포넌트 추상화 해보기

지난 리액트 과제에서 만들었던 툴팁을 이번 프로젝트에 적용시켜보려고 한다. 하지만 이번에는 차이점이, 나만 쓰는 것이 아닌, 해당 툴팁을 우리 팀원들 역시 사용할 가능성이 매우매우 높다는 점이다. 그래서 나만 쓰던 툴팁 컴포넌트를 추상화해보았다.

일단 조건을 생각해보자. 툴팁에는 어떤 조건들이 필요할까? 일단 가장 중요한 내용이 있어야 하고, 툴팁의 표시 방향, 그리고 어떤 상황에서 표시해 줄 것인지? (hover? focus? 아니면 항상?), 아니면 항상 띄워둘 것 인지 등 여러 조건이 필요할 것이다. 이해하기 힘드니 코드로 표현해보면 아래와 같다.

  $direction: "left" | "right" | "bottom" | "top"; // 방향
  $clicked?: boolean; // 항상 표시해줄 것인지?
  $tooltip: string; // 툴팁 내용
  $options: "focus" | "hover" | "all"; // hover? foucs? 아니면 두 상황 모두 보여줄 것인지?

요렇게 나눠봤다. 나름? 깔끔해 보이지만 막상 내부 로직을 작성하는 데에 꽤 어려움을 겪었다. 문제는 바로 styled-components였다.

🤙styled-components props 익숙해지기

나름 하루종일 공부했다...

기존에는 그냥 외부에서 사용을 고려하지 않아서 props고 뭐고 내가 의도한 동작만 나오게 구현했었지만 이제는 props에 따라서 css를 다르게 주어야 한다는 전제조건이 생겼다. 따라서 props를 기존처럼 외부 코드에서 그대로 가져오는 것이 아닌 props에 대한 전반적인 이해가 필요했고,,, 열심히 연습해봤다.

결국 가장 깔끔한 방법은 아래와 같이 전체 프롭스를 가져와서 필요한 부분에서 switch case문을 사용해 분기하여 각각 조건에 맞는 css를 return하는 형식이 제일 깔끔했던 것 같다.

  ${props => {
    switch (props.$options) {
      case "all":
        switch (props.$tooltip) {
          case "":
            return css`
              &:hover:before,
              &:hover:after {
                visibility: visible;
                opacity: 1;
              }

              &:focus-within:before,
              &:focus-within:after {
                visibility: hidden;
                opacity: 0;
              }
            `;
          default:
            return css`
              &:hover:before,
              &:hover:after {
                visibility: visible;
                opacity: 1;
              }

              &:focus-within:before,
              &:focus-within:after {
                visibility: visible;
                opacity: 1;
              }
            `;
        }
      case "focus":
        switch (props.$tooltip) {
          case "":
            return css`
              &:focus-within:before,
              &:focus-within:after {
                visibility: hidden;
                opacity: 0;
              }
            `;
          default:
            return css`
              &:focus-within:before,
              &:focus-within:after {
                visibility: visible;
                opacity: 1;
              }
            `;
        }
      case "hover":
        return css`
          &:hover:before,
          &:hover:after {
            visibility: visible;
            opacity: 1;
          }
        `;
      default:
        return null;
    }
  }}

나름 깔끔하지...는 않아도 열심히 연습, 적용해봤고, 그리고 조건별로 최대한 깔끔하게 구현하려고 노력했다. 다만 아쉬운 점이 한 가지 있다.

지금 구조를 보면 attribute에서 data를 가져오고 있는데 $tooltip props값으로 가져오는 방법을 잘 모르겠다..

    content: attr(data-tooltip);

!!!!!!!!!!!!!!!!!!!! TIL의 장점이 이런 것인가? 쓰면서 이리저리 끄적거리다보니 해결했다.
문자열로 감싸주니...동작했다!!!! 감격..!!

    content: "${props => `${props.$tooltip}`}";

📖소회

주말이지만 주말이 아니다. 구현사항, 리팩토링 사항이 꽤 많다. 그래도 책도 꽤 읽었고 쉬면서 개발을 잘 즐길 수 있었다. 거기다 TIL 쓰면서 문제도 해결했고... 감격스럽구만 ㅎㅎ
다만 해야 할 일들. 코테 이런 것들을 잘 못하는데 시간을 최대한 내보자..!! 내일도 화이팅!!🔥🔥
TIL 작성 소요 시간 약 25분