TWIL 2020-10 (4)

1. sort()

---

테이블 항목 번호 표기 방식에 하이픈(-)이 추가되어 테이블 sort 로직을 변경해야 했다(1, 1-1, 2, 2-1, 2-2, 3...). 간단해 보였지만 시행착오를 거치다가 -을 .으로 변경하여 소수점으로 처리하는 방법을 배웠다. 코드가 매우 간결해졌다.

const sortFunction = (alpha, beta) => {
  const apItemID = parseFloat(alpha.lineItemID.replace("-", "."));
  const btItemID = parseFloat(beta.lineItemID.replace("-", "."));
  if (apItemID > btItemID) {
    return 1;
  } else if (apItemID < btItemID) {
    return -1;
  } else {
    return 0;
  }
  // return apItemID > btItemID ? 1 : apItemID < btItemID ? -1 : 0
};

항목이 10개를 넘어가면 다른 방법을 적용해야 한다.

2. map() vs. forEach()

---

반드시 새로운 배열을 리턴해야 하는 경우가 아니라면 forEach()를 사용하여 불필요한 리턴이 없도록 주의한다. (reducer 파일에서 state를 변경하는 로직이었다.)

3. 삼항연산자

---

row.checked ? (row.checked = false) : (row.checked = true);

항목이 선택되어있으면 해제하고, 해제되어있으면 선택하는 코드는 아래처럼 간결하게 표현할 수 있다.

row.checked = !row.checked;

4. trim()

---

사용자가 입력한 input 값이 12345 678910 같은 형태를 띄어야 하는데 12345만 입력된 경우의 에러 핸들링이 필요했다.

if (!barcodeInput.includes(" ")) {
  dispatch(handleError("..."));
}

반드시 공백을 포함하는 조건으로만 작성했는데, 사용자 입력 값을 핸들링 할 때는 아래처럼 처리하는 것이 더 정확하다.

if (barcodeInput.trim().split(" ").length !== 2){
  dispatch(handleError("..."));
}