가상 스크롤 바, 날짜 라이브러리(DAY.JS), 해시 태그, emotion.js에서 css에 변수 활용, 정규 표현식

가상 스크롤 바

 npm install react-custom-scrollbars --save

npm i --save-dev @types/react-custom-scrollbars

이렇게 설치가 된다.

 

  <ChatZone>
      {/*autoHide는 가만히 있으면 스크롤이 사라진다.*/}
      <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}>
        {chatData?.map((chat) => (
          <Chat key={chat.id} data={chat} />
        ))}
      </Scrollbars>
    </ChatZone>

이렇게 사용이 가능하다. Scrollbars는 div 역할도 해준다.

 

날짜 라이브러리(DAY.JS)

npm i dayjs

이렇게 설치하면된다.

 

          <span>{dayjs(data.createdAt).format('h:mm A')}</span>

그리고 이렇게 사용하면 시간만 나온다.

 

해시 태그 라이브러리

npm i -D @types/react-mentions

이렇게 설치한다.

 

  <EachMention focus={focus}>
          <img
            src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })}
            alt={memberData[index].nickname}
          />
          <span>{highlightedDisplay}</span>
        </EachMention>
      );
    },
    [memberData],

이렇게 사용한다.

emotion.js

export const EachMention = styled.button<{ focus: boolean }>`
  padding: 4px 20px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  color: rgb(28, 29, 28);
  width: 100%;
  & img {
    margin-right: 5px;
  }
  //css에서도 변수를 쓸 수 있다.
  //emotion에서는 focus가 true이면 밑에 속성을 추가적으로 해준다.
  ${({ focus }) =>
    focus &&
    `
    background: #1264a3;
    color: white;
  `};

기존에는 변수를 여러 개 만들어서 적용해줬다. 하지만 emotion에서는 focus가 true이면 밑에 속성을 추가적으로 해준다.

a라는 함수를 a``로 호출할 수 있다. 따라서 저 코드의 `` 안의 내용은 함수 호출이다.

 

정규 표현식

사람은 이 문자를 구분할 수 있지만 컴퓨터는 모른다. 따라서 정규 표현식이 필요하다.

 

npm i regexify-string

이렇게 라이브러리를 설치하면된다.

 

  const result = useMemo(
    () =>
      regexifyString({
        input: data.content,
        //g는 모두 선택한다는 의미
        //  // 안에 쓴다. 그리고 .은 모든 글, +는 한 개 이상, 숫자는 \d, ?는 0개나 1개, *은 0개 이상
        //  만약 @[제로초]12](7)일 때, +만 하면 제로초]12로 최대한 많이 찾고, +? 하면 제로초로 최대한 적게 찾는다.
        //  |는 또는, /n은 줄바꿈 의미
        pattern: /@\[(.+?)]\((\d+?)\)|\n/g,
        decorator(match, index) {
          const arr: string[] | null = match.match(/@\[(.+?)]\((\d+?)\)/)!;
          if (arr) {
            return (
              <Link key={match + index} to={`/workspace/${workspace}/dm/${arr[2]}`}>
                @{arr[1]}
              </Link>
            );
          }
          return <br key={index} />;
        },
      }),
    [workspace, data.content],
  );

g는 모두 선택한다는 의미 // 안에 쓴다. 

.은 모든 글, +는 한 개 이상, 숫자는 \d, ?는 0개나 1개, *은 0개 이상

만약 @[제로초]12](7)일 때, +만 하면 제로초]12로 최대한 많이 찾고, +? 하면 제로초로 최대한 적게 찾는다. |는 또는, /n은 줄바꿈 의미

memo, useMemo는 리렌더링이 너무 많이 일어나서 사용했다.