복잡한 컴포넌트나 훅에 JSDoc 추가

제가 만든 컴포넌트나 훅이라도 시간이 지나니 매개변수로 어떤 값이 들어갈 수 있는지 기억이 안 나는 경우가 있었습니다.

TypeScipt를 사용한다면 문제가 안 되겠지만 JavaScript를 사용한 프로젝트라서 JSDoc을 추가였습니다.

// src\hooks\useModal.js
/**
 * Bottomsheet를 열고 지정된 요소 목록을 표시합니다.
 * @param {Object[]} elementList - Bottomsheet에 표시할 요소 목록입니다.
 * @param {string} elementList[].name - 요소의 이름 또는 레이블입니다.
 * @param {function} elementList[].action - 요소를 클릭했을 때 실행할 함수입니다.
 * @param {string} elementList[].to - 요소를 클릭했을 때 이동할 경로 또는 URL입니다.
 * @param {boolean} elementList[].closeAfterAction - 요소를 클릭한 후 Bottom sheet를 자동으로 닫을지 여부를 나타내는 불린 값입니다.
 * @returns {void}
 *
 * @example
 * // Bottom sheet에 표시할 요소 목록
 * const elements = [
 *   { name: '항목 1', action: () => console.log('항목 1 클릭됨') },
 *   { name: '항목 2', action: () => console.log('항목 2 클릭됨'), closeAfterAction: true },
 *   { name: '항목 3', to: '/path/to/page' }
 * ];
 *
 * // Bottom sheet 열기
 * const { openBottomSheet } = useBottomSheet();
 * openBottomSheet(elements);
 */
const openBottomSheet = (elementList) => {
  setBottomSheet({
    isOpen: true,
    elementList: elementList,
    onClose: closeBottomSheet,
  });
};

위는 BottomSheet 컴포넌트를 열 때 사용하는 useBottomSheet 훅의 일부로, 이렇게 함수나 컴포넌트 위에 JSDoc을 추가하면 사용 시 해당 문서가 표시돼 쉽게 사용할 수 있었습니다.

협업을 하는 상황이라면 코드를 처음 보는 팀원에게 더 큰 도움이 될 것 같습니다.