241117 TIL

• Udemy <클린코드 자바스크립트>
  • 함수명은 동사로 시작하도록 짓자.
  • input 태그의 required를 설정해주면 필수로 값을 요구할 수 있고, minlength 어트리뷰트에 값을 넣어주면 최소 글자수를 검증할 수 있다.
  • input 창 입력 시 유효성 검증에서 문제가 발생하면 문제가 생긴 곳에 자동으로 포커스되게 해주거나, 유효성 검증에서 문제가 생긴 이유를 명확하게 보여준다거나, 이와 같이 User Friendly하게 개발을 하도록 항상 노력해야 한다. 에러 메시지를 alert 해준다거나 안내 문구를 띄워줄 땐 누구나 이해할 수 있도록 쉽고 직관적이게, 그리고 이후 유저의 동작이 유도되도록 포커스-하이라이트 하는 등의 UX를 클라이언트 개발자로서 신경쓰자.

• React로 TODO APP 만들기
  • onChange 이벤트 핸들러의 이벤트 발생은 단시간 내에 불필요하게 리렌더가 너무 많이 발생할 수 있는 문제가 존재하기 때문에 디바운스(Debounce)를 구현해봤다. 디바운스는 가장 마지막 이벤트 발생 후 지정한 시간 만큼을 딜레이하고 콜백 함수를 실행한다.
  • 리액트에서 디바운스를 구현할 때(뿐만 아니라, setTimeout 같은 비동기 함수를 실행할 때) 주의할 점은, 태스크를 대기하는 중간에 컴포넌트가 언마운트 될 수 있다는 점이다. 콜백 함수는 딜레이 타임 이후의 실행 환경에 영향을 받아 동작하기 때문에, 딜레이 타임 이전에 컴포넌트가 언마운트되면 예상치 못한 동작이 발생할 수 있다.
  • 아래와 같이 useEffec의 두 번째 인자인 의존성 배열을 빈 배열로 전달하면 처음 컴포넌트가 실행될 때 한번 콜백 함수가 실행되고, 언마운트 될 때 마지막으로 한번 return문에 정의해 둔 클린업 함수가 실행된다(useEffect에 대해 좀 더 자세히 공부해보기).

  import { useRef, useEffect } from 'react';
  
  // 디바운스 구현
  const timerId = useRef(null) // timer 클린업을 위한 id 저장 ref 변수 설정
  const onChange = (e) => {
    if (timerId.current) {
      clearTimeout(timerId.curret)
    }
  
    timerId.current = setTimeout(() => {
      // 필요한 로직 처리
    }, 1000);
  }
  
  // 컴포넌트 언마운트 시 timer 클린업
  useEffect(() => {
    return () => { 
      if (timerId.current) {
        clearTimeout(timerId.current)
      }
    }
  }, []) // 의존성 배열로 빈 배열 전달해서 마운트-언마운트 시 한 번씩 처리

  • React에서 onChnage 이벤트 핸들러 없이 form 태그 내부의 type="checkbox"인input태그에checked` 값을 정의하면 아래와 같은 warning이 나온다.

Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. Error Component Stack

• GPT한테 물어보니, input에 checked 속성을 사용하면 리액트는 자동으로 해당 필드를 제어 컴포넌트로 간주한다고 한다. 즉, 리액트가 자기가 checked 속성을 갖는 필드를 무조건 직접 관리해야 한다고 간주하는데, onChange 이벤트 핸들러가 없으면 리액트 자신이 해당 필드의 변경 사항을 알 수 없기 때문에 warning을 뱉는다.
• onChange 이벤트 핸들러를 추가해주면 warning이 쉽게 없어지지만, 경우에 따라서는 input 태그에 직접 이벤트 핸들러를 등록하는 게 아닌, 부모 요소에 이벤트 핸들러를 달고 이벤트 캡쳐링-버블링을 통해 원하는 이벤트 정보를 받으려는 경우엔 그렇게 하는 게 귀찮은 작업일 수 있다.
• 그럴 땐 checked 값을 수동으로 넣어줘야 하는 input 태그에 readOnly 속성을 주면 문제가 해결된다.
• <label> 태그를 사용하면 input 태그를 type="checkbox"로 사용할 때 같은 form 태그의 하위로 묶인 형제 요소가 클릭되어도 input 상태를 토글할 수 있게 만들 수 있다. todo 아이템 같은 경우엔 어디를 클릭해도 input type="checkbox"인 요소가 토글되도록 하는 게 UX 상 좋을 수 있기 때문에, 이런 경우엔 label 태그를 잘 활용하면 도움이 될 것 같다.