👨‍💻 사건

포지션별 체크박스를 만들어, 해당 포지션을 클릭하면 그 포지션이 가능한 선수들의 리스트를 뽑아내기위해 고민하였다.
체크박스를 선택했을때, 해당 옵션이 배열에 저장되고 그 배열을 request 로 보내도록 시도해보았다.

✅ 해결

다음과 같은 플로우를 거친다.
1. 체크박스를 클릭하면, key,value,operator 을 가진 객체를 option 배열에 추가한다.
( 커스텀 훅을 만들어서, option 배열을 관리하도록 하였다. )

import { useState, ChangeEventHandler } from 'react'

export interface CheckBoxOption {
  key: string
  value: number
  operator: string
}

interface CheckBoxFilterHook {
  options: CheckBoxOption[]
  handleCheckBoxChange: (
    value?: number,
    operator?: string
  ) => ChangeEventHandler<HTMLInputElement>
}

const useCheckBoxOption = (): CheckBoxFilterHook => {
  const [options, setOptions] = useState<CheckBoxOption[]>([])

  const handleCheckBoxChange =
    (value: number = 15, operator: string = '>=') =>
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const checkBoxOption = event.target.value
      const isChecked = event.target.checked

      if (isChecked) {
        const newOption: CheckBoxOption = {
          key: checkBoxOption,
          value: value,
          operator: operator,
        }
        setOptions((prevOptions) => [...prevOptions, newOption])
      } else {
		// 클릭을 해제하면 옵션에서 제거
        setOptions((prevOptions) =>
          prevOptions.filter((option) => option.key !== checkBoxOption)
        )
      }
    }

  return { options, handleCheckBoxChange }
}

export default useCheckBoxOption

2. option 배열이 변화가 되면 useEffect 를 통해 다시 데이터 패칭이 일어난다.

...
const { options, handleCheckBoxChange } = useCheckBoxOption()
...
useEffect(() => {
  if (!endPage) {
    fetchPage(page, filter, verify, options)
  }
  setEndPage(false)
}, [page, filter, verify, options])
...

2-1. 데이터 패칭이 일어날때, 기존의 page,filter,verify 에 1번에 설정한 option을 쿼리로 넘긴다.
2-2. option 이 배열이다보니 여러 값이 있을수있기 때문에, 해당 과정도 option 을 map 으로 순회하면서 스트링문에 AND 를 붙이는 쿼리를 다시 만든다.
2-3. 다시 작성된 쿼리를 사용하여, MySQL 에 작성된 쿼리의 값의 유무에 따라 WHERE 문을 넣는다.

connection.connect((err: MysqlError | null) => {
  ...
  const options = req.query.options
    ? JSON.parse(req.query.options.toString())
    : []

  const whereClauses = options
    .map(({ key, value, operator }) => {
      return `${key} ${operator} ${value}`
    })
    .join(' AND ')
  ...
  const query: string = `SELECT *, 
  ...
	${
    whereClauses ? `WHERE ${whereClauses}` : ''
  } ORDER BY ${filter} ${verify} LIMIT ${limit} OFFSET ${offset}`
	...

💭 개선

• 체크 박스 옵션은 끝냈으니, 이제 검색에 따라 데이터패칭이 될수있도록 설정해야겠다. 이름,국적을 적용할 생각이다.