공부 정리용 블로그

  2차 프로젝트를 진행하면서 DB에 있는 전체 데이터를 보여주는 Table을 만들었습니다. MUI Data Grid와 같은 좋은 라이브러리들이 있지만, 아직 TypeScript를 공부하지 않아서 사용을 하지 못했습니다. 그래서 임시방편으로 table 태그를 이용해 직접 표를 만들었습니다. 코드가 지저분해지고 많은 기능을 넣을 수는 없어서 아쉬웠지만, 직접 table을 만들어 보는 것도 좋은 경험이었습니다.

  표를 다 만든 후에, th 항목에 마우스를 올리면 설명이 표시되게 하고 싶었는데, 마침 Radix Tooltip이라는 좋은 라이브러리를 찾아서 아래와 같이 구현할 수 있었습니다. 사용법도 간단합니다.

1. 설치

// install
npm install @radix-ui/react-tooltip

// import
import * as Tooltip from '@radix-ui/react-tooltip';

  터미널에 위와 같이 입력해서 설치한 후, Radix Tooltip을 사용할 페이지에서 import 해주세요.

2. 구조

import React from 'react';
import * as Tooltip from '@radix-ui/react-tooltip';
import { PlusIcon } from '@radix-ui/react-icons';
import './styles.css';

const TooltipDemo = () => {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="IconButton">
            <PlusIcon />
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content className="TooltipContent" sideOffset={5}>
            Add to library
            <Tooltip.Arrow className="TooltipArrow" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
};

export default TooltipDemo;

  Radix Tooltip 페이지에서 제공하는 Demo Code입니다. Tooltip.Provier 태그가 전체를 감싸고 있고, 그 아래를 Tooltip.Root 태그가 감싸고 있습니다. Tooltip.Root 태그는 Tooltip.Trigger, Tooltip.Portal 태그를 감싸고 있는 구조입니다. 정리하면 다음과 같습니다.

• Tooltip.Provider : 전체 Tooltip을 감싸는 태그
• Tooltip.Root : Tooltip이 표시될 th 하나를 감싸는 태그
  • Tooltip.Trigger : Tooltip이 작동될 th 요소가 있는 태그
  • Tooltip.Portal : Tooltip event가 작동되면 표시될 메시지가 있는 Tooltip.Content 태그를 감싸는 태그

  전체적인 구조는 위와 같고, 사용하실 때는 Tooltip.Provider로 Tooltip이 들어갈 태그 전체를 감싸신 후에, th 하나마다 Tooltip.Root로 감싸주고, 그 안에 Tooltip.Trigger와 Tooltip.Portal로 나눠주시면 됩니다.

3. 사용 예시

<Tooltip.Provider delayDuration={0}>                              // Provider
  <Tooltip.Root>                                                    // Root 1
    <Tooltip.Trigger asChild>                                         // Trigger
      <th
        className='academyCount'
        onClick={(e) => handleThClick(e.target.className)}
      >
        *학원 수{getSortIcon('academyCount', sortColumn, sort)}
      </th>
    </Tooltip.Trigger>
    <Tooltip.Portal>                                                   // Portal
      <Tooltip.Content className='TooltipContent' sideOffset={10}>
        학원 수 (평생직업 교육학원), 자치구 기준
        <Tooltip.Arrow className='TooltipArrow' />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
  <Tooltip.Root>                                                    // Root 2
    <Tooltip.Trigger asChild>                                          // Trigger
      <th
        className='libraryCount'
        onClick={(e) => handleThClick(e.target.className)}
      >
        *도서관 수{getSortIcon('libraryCount', sortColumn, sort)}
      </th>
    </Tooltip.Trigger>                                                  // Portal
    <Tooltip.Portal>
      <Tooltip.Content className='TooltipContent' sideOffset={10}>
        도서관 (공공도서관, 작은도서관, 장애인도서관)
        <Tooltip.Arrow className='TooltipArrow' />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>;

  예시 코드를 보시면, 전체 Tooltip 태그를 Tooltip.Provider가 감싸고 있고, Tooltip.Root 태그 두 개를 사용하여 두 개의 th 태그에 tooltip을 표시하고 있습니다. Tooltip.Trigger 안에는 th 태그 내용이 들어가 있고, Tooltip.Portal 안에는 tooltip에 표시될 Tooltip.Content가 있습니다. 코드가 길어질 뿐, 코드 자체는 간단합니다.

4. CSS 적용

  CSS를 적용하려면 CSS 파일을 생성한 후에, 공식 홈페이지에 있는 CSS 내용을 복사 붙여넣기 해주시고, css 파일을 import 해주시면 됩니다.

5. 주요 옵션

<Tooltip.Provider delayDuration={0} disableHoverableContent={false}> // 사용 예시

1. Provider

1) delayDuration (기본값: 700)

  요소 위에 마우스를 올려놨을 때, 몇 초 후에 tooltip이 표시될지 선택하는 옵션입니다. 저는 바로 뜨기를 원해서 0으로 설정했습니다.

2) skipDelayDuration (기본값: 300)

  tooltip 요소가 표시된 후 다른 tooltip으로 이동했을 때 설정한 delayDuration을 Reset 하는 시간을 설정합니다. 예를 들어, 학원 수에 마우스를 올려서 tooltip이 표시되었으면, skipDelayDuration에서 설정한 시간 내(300)에 다른 요소로 이동하면 바로 tooltip이 뜹니다. 하지만 skipDelayDuration에서 설정한 시간 이후에 다시 tooltip에 마우스를 올린다면, delayDuration에서 설정한 시간 후에 tooltip이 표시됩니다. skipDelayDuration을 0으로 설정한다면, 마우스를 이동할 때마다 항상 delayDuration에서 설정한 시간 후에 tooltip이 표시될 것입니다.

3) disableHoverableContent (Boolean 값)

  이 옵션을 false로 설정하면 tooltip 메시지 위에 마우스를 올려놓아도, tooltip이 사라지지 않지만, true로 설정하면 tooltip 메시지에 마우스를 올려놓으면 tooltip이 사라집니다. true로 설정하면 접근성에 영향을 미칠 수도 있다고 하니 기본값인 false로 설정하는 게 좋습니다.

<Tooltip.Provider delayDuration={0} disableHoverableContent={true}> // 사용 예시

2. Root

1) defaultOpen (Boolean 값)

  true로 설정하면 처음 랜더링 될 때 tooltip이 표시됩니다.

<Tooltip.Root defaultOpen={true}> // 사용 예시

3. Content

1) sideOffset (기본값: 0)

  Trigger 요소로부터 위로 얼마만큼 떨어져서 표시할 것 인지 설정합니다. 설정한 숫자가 표시할 수 있는 높이를 초과하면 아래로 표시가 됩니다.

2) align (기본값: 'center, ENUM = ['start', 'center', 'end']), alignOffset (기본값: 0)

  Trigger 요소로부터 왼쪽이나 오른쪽으로 얼마만큼 떨어져서 표시할 것인지 설정합니다. 기본값은 center이므로, align 값을 생략하고 alignOffset 값을 입력하면 적용이 되지 않지만, align을 'start'로 설정한 후에 alignOffset 값을 입력하면, 입력한 값만큼 오른쪽으로 표시가 됩니다. 반대로 align 값을 'end'로 설정하면 alignOffset에서 입력한 값만큼 왼쪽에서 표시가 됩니다.

<Tooltip.Content sideOffset={10} align='start' alignOffset={50}>

  그 외에 여러 가지 옵션들이 있지만, 기본 옵션만으로도 멋진 tooltip을 구현할 수 있기 때문에 생략하겠습니다. 필요한 옵션이 있다면 공식 문서를 참고해 주세요.

참고 문헌

1. Tooltip - Radix Primitives

2. github 예제 코드

WARNING in [eslint]
src\App.js
  Line 22:48:  Array.prototype.map() expects a return value from arrow function  array-callback-return

  React에서 map 함수를 사용했을 때 결과가 제대로 나오지 않으면서 "Array.prototype.map() expects a return value from arrow function"이라는 에러가 발생할 때가 있습니다. React는 JSX문법을 사용하는데, HTML 태그를 리턴해주는 경우 JavaScript에서 사용했을 때 처럼 중괄호를 이용해서 map 함수를 작성하면 위의 에러가 발생합니다.

// JavaScript
const A = [1, 2, 3, 4, 5];

A.map((data) => {
  console.log(`${data}번 째 console.log`);
  console.log(data);
});

// JSX
const Breeds = (props) => {
  return (
    <dl>
      {props.list.map(({ breed, description }) => {      // 중괄호({ })가 아닌 괄호(( ))를 써야 함
        <Fragment key={breed}>
          <dt>{breed}</dt>
          <dd>{description}</dd>
        </Fragment>;
      })}
    </dl>
  );
};

  JavaScript에서 map 함수를 이용해서 여러 줄을 반환할 때 중괄호를 써야 하지만, JSX에서는 중괄호를 괄호로 바꿔주어야 에러가 발생하지 않고 함수가 제대로 실행됩니다.

import { Fragment } from "react";

const Breeds = (props) => {
  return (
    <dl>
      {props.list.map(({ breed, description }) => (    // 코드 수정한 부분
        <Fragment key={breed}>
          <dt>{breed}</dt>
          <dd>{description}</dd>
        </Fragment>;
      ))}    // 코드 수정한 부분
    </dl>
  );
};

const lists = [
  { breed: "치와와", description: "작은 품종의 개." },
  { breed: "코기", description: "귀여운 품종의 개." },
  { breed: "컴벌랜드 시프도그", description: "멸종된 품종의 개." },
];

function App() {
  return <Breeds list={lists} />;
}

export default App;

  이렇게 코드를 수정해주면 lists의 객체들이 제대로 화면에 표시되는 것을 볼 수 있습니다. Breeds 함수의 return 부분 처럼 여러 줄의 JSX 표현식을 반환할 때는 괄호를 사용해야 하기 때문에, map 함수를 이용해서 태그를 반환해줄 때에도 중괄호가 아닌 괄호를 사용해야 합니다.

  JavaScript 공부를 하면서 난감한 경우 중 하나가 아래와 같이 물음표(?)와 같은 특수 문자를 마주할 때입니다.

const dogName = adventurer.dog?.name;

  구글에서 'JavaScript ?.' 으로 검색을 하면 'JavaScript' 검색 결과만 나와서 이걸 어떻게 찾아야 할지 막막했던 기억이 납니다. 그래서 이번에는 JavaScript에서 물음표를 사용하는 연산자들을 정리해 보도록 하겠습니다.

1. 조건 (삼항) 연산자 (A ? B : C) - Conditional (ternary) operator

(조건) ? (조건이 True일 때) : (조건이 False일 때)

  삼항 연산자는 if문과 비슷하지만, if문을 쓸 수 없을 때나 간결하게 쓸 수 있을 때 많이 사용합니다.

const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
// -----------------------------------------------------
const age = 17;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Juice"

  위의 예시를 보면 age가 21 이상인 경우에는 'Beer', 그 외에는 'Juice'가 beverage의 값이 됩니다. age가 26일 경우에 console.log를 찍어보면 true일 때 값인 "Beer"가, age가 17일 경우에는 false일 때의 값인 "Juice"가 표시됩니다. 

if (age >= 21) {
  return "Beer";
} else {
  return "Juice";
}

  if문으로 표현하면 여러 줄이 필요하기 때문에, if문이 복잡하지 않은 경우에는 삼항 연산자를 쓰는 편이 깔끔해 보입니다.

<main>
  <h1>Welcome to this website</h1>
  {isLoggedIn ? (
    <button onClick={logout}>Log out</button>
  ) : (
    <button onClick={login}>Log in</button>
  )}
</main>

  다음으로는 if문을 사용할 수 없는 경우입니다. React에서 사용하는 경우가 많습니다. 위의 예시에서는 로그인이 되어있으면 isLoggedIn 값을 true로 설정해 줍니다. 따라서 로그인이 되어 있는 경우에는 로그아웃 버튼이 보이고, 로그아웃이 되어있는 경우에는 isLoggedIn 값이 false이므로, 로그인 버튼이 보이게 됩니다.

<button onClick={isPlaying ? onClickPause : onClickPlay}>
  {isPlaying ? "Pause" : "Play"}
</button>

  위의 예시에서도 동영상이 재생 중인 경우에는 isPlaying 값이 true로 설정되어 있습니다. 따라서 재생 중일 때는 버튼의 이름이 "Pause"가 되고 버튼을 클릭하면 동영상을 멈추는 onClickPause 함수가 실행됩니다. 반대로 동영상이 멈춰있는 경우에 isPlaying 값이 false가 되어서, 버튼 이름은 "Play"가 되고 버튼을 클릭하면  동영상을 재생해 주는 onClickPlay 함수가 실행됩니다. 

<main>
  <h2 style={{ display: "flex", gap: "6px" }}>
    Secret password
    <button onClick={() => setExpended(false)}>-</button>
    <button onClick={() => setExpended(true)}>+</button>
  </h2>
  {isExpended && (
    <p>
      password: <code>hunter2</code>
    </p>
  )}
</main>;

  참고로 AND(&&) 연산자 사용하면 연산자 앞의 값이 True일 때, 연산자 뒤의 값을 리턴해줍니다. + 버튼을 누르면 isExpended값이 true가 되면서 <p> 태그 안에 있는 password의 값이 보이게 됩니다.

2. 널 병합 연산자 (??) - Nullish coalescing operator

a ?? b // a 값이 null, undefined면 b를 반환함

  물음표 두 개(??)는 Nullish coalescing operator입니다. ?? 앞의 값이 null 값이거나 undefined면 뒤의 값을 반환해줍니다.

const firstName = null;
const lastName = undefined;
const nickName = "Violet";

alert(firstName ?? lastName ?? nickName ?? "Cheese"); // Violet

  firstName 값이 null이고, lastName 값은 undefined이므로, 뒤에 있는 nickname 값이 반환됩니다. 만약 nickName도 null이거나 undefined였다면, 뒤에 있는 "cheese" 값을 반환해 줄 것입니다.

1. Nullish coalescing operator 
  -> 첫 번째 정의된(defined) 값을 반환
  -> null, undefined 값만 취급한다.
2. OR(||) 연산자
  -> 첫 번째 truthy 값을 반환
  -> null, undefined 외에도 0 값을 falsy 값으로 취급한다.

  앞에서 AND(&&) 연산자가 사용된 경우를 봤다면, 이번에는 OR(||) 연산자가 사용된 경우를 보겠습니다. Nullish coalescing operator는 || 연산자와 유사하지만, 차이점이 존재합니다. 전자의 경우에는 첫 번째 정의된 값을 반환하고, null과 undefined 값만 취급합니다. 후자의 경우에는 첫 번째 truthy 값을 반환하고, null과 undefined 외에도 0 값을 falsy 값으로 취급합니다. 따라서, 숫자 0이 할당될 수 있는 변수를 사용할 때는 ||보다는 ??을 사용하는 것이 좋습니다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

  height 값을 0으로 설정하고 || 연산자를 사용하는 경우에는, 0을 falsy 값으로 취급하므로 첫 번째 truthy 값인 100을 반환합니다. ?? 연산자를 사용하는 경우에는 0은 truthy 값이 되어 null이나 undefined 값이 아니게 됩니다. 따라서 첫 번째 정의된 값인 0을 반환해 줍니다. 위의 예시처럼 0이 의미가 있는 값이라면 ?? 연산자를 사용하는 것이 적합합니다. 

3. 옵셔널 체이닝 (?.) - Optional chaining

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

// Nullish coalescing operator를 사용할 경우
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

  Optional Chaining은 ?. 앞의 값이 "있다.", "없다."만을 평가합니다. 만약 ?. 앞의 값이 null이나 undefined인 경우에는 평가를 멈추고 undefined를 반환합니다. 에러는 발생시키지 않습니다. Nullish coalescing operator와 유사하지만, Optional Chaning을 사용하면 코드를 더 간결하게 작성할 수 있습니다. 위의 예시에서는 user는 존재하지만, user의 address 항목이 존재하지 않기 때문에 undefined를 반환할 것입니다.

const hashedPassword = await User.findOne({ userId }, "password")
  .lean()
  .then((user) => user?.password);

  제가 프로젝트 하면서 작성했던 코드입니다. findOne함수를 이용해 DB에서 userId가 일치하는 user의 password를 가져왔습니다.

{
  _id: new ObjectId('684e4ccc91757a381b66e7ad'),
  password: '$2b$10$sXCscjG5Wn6FKBEfn.lwF.NOVyAO/6EP5HDO.OBgn9GbXXCVzjIZS'
}

  만약 user가 존재한다면 위와 같이 _id와 password 필드를 가져올 것입니다. user가 존재하지 않는다면 user?.password는 undefined 값을 반환할 것입니다. 이 예시에는 user가 존재하므로, 객체의 password 값을 아래와 같이 반환합니다.

$2b$10$sXCscjG5Wn6FKBEfn.lwF.NOVyAO/6EP5HDO.OBgn9GbXXCVzjIZS

참고 문헌

1. Conditional (ternary) operator - MDN 문서

2. Nullish coalescing operator - MDN 문서

3. Nullish coalescing operator - JAVASCRIPT.INFO

4. Optional chaining - MDN 문서

5. Optional chaining - JAVASCRIPT.INFO