이정도면 그래도 훑기는 다 훑었다고 생각했는데, 왜 초면인 개념이 나오는걸까?

debounce

연속된 이벤트 중에서 일정 시간 동안 마지막 이벤트만을 처리하도록 하는 기술
ex. 검색 입력란에 텍스트를 입력할 때 실시간 검색 결과를 보여주는 경우, 사용자가 타이핑하는 동안 쿼리를 실행하는 대신 일정 시간 동안 입력이 없을 때만 쿼리를 실행

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

throttle

일정한 시간 간격으로 이벤트를 실행하도록 하는 기술
ex. 스크롤 이벤트에서 스크롤 이벤트가 너무 빠르게 발생할 때, 스크롤 이벤트 핸들러를 일정한 간격으로만 실행하여 브라우저의 성능을 향상시킴
일정한 주기로 이벤트 핸들러가 실행되도록 보장

function throttle(func, delay) {
  let lastRun = 0;
  return function () {
    const now = Date.now();
    if (now - lastRun >= delay) {
      func.apply(this, arguments);
      lastRun = now;
    }
  };
}

useRef

React에서 사용되는 Hook 중 하나
함수 컴포넌트에서 DOM 요소를 참조하거나 다른 목적으로 사용하는데 도움을 주는 객체

DOM 요소 참조

특정 DOM요소에 접근하기 위해 사용

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myInputRef = useRef(null);

  useEffect(() => {
    // myInputRef를 사용하여 DOM 요소에 접근할 수 있습니다.
    myInputRef.current.focus();
  }, []);

  return <input ref={myInputRef} />;
}

이전 값을 저장

이전 값은 컴포넌트가 리렌더링될 때 재생성되지않으므로 값을 지속적으로 유지 가능

import React, { useRef, useEffect } from 'react';

function MyComponent({ count }) {
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount !== undefined ? prevCount : 'N/A'}</p>
    </div>
  );
}

데이터 저장

컴포넌트 상태 외의 데이터를 저장하거나 컴포넌트의 렌더링과 관련 없는 데이터를 유지
컴포넌트의 렌더링과 관련이 없으므로 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음

import React, { useRef } from 'react';

function MyComponent() {
  const dataRef = useRef({ name: 'John', age: 30 });

  const updateData = () => {
    // useRef를 사용하여 데이터에 접근하거나 수정할 수 있습니다.
    dataRef.current.age += 1;
    console.log(dataRef.current);
  };

  return (
    <div>
      <button onClick={updateData}>Increment Age</button>
    </div>
  );
}

Strict Mode

애플리케이션을 개발할 때 발생할 수 있는 잠재적인 문제를 식별하고 경고를 표시하여 개발자에게 애플리케이션의 품질을 높이는데 도움

React Strict Mode는 애플리케이션의 개발 모드에서만 활성화되며, 프로덕션 빌드에는 영향을 미치지 않음

• 예상치 못한 부작용 식별 가능: 컴포넌트 렌더링 중에 예상치 못한 부작용(애매한 부작용, 무한 루프 등)을 검출하고 경고 메시지를 출력
• Legacy String Ref 경고: 문자열 참조(ref="myRef") 대신 createRef나 콜백 함수를 사용하는 것을 권장
• 레거시 라이프사이클 경고: 레거시 라이프사이클 메서드 사용시 경고를 표시. React 16.3 이후에는 라이프사이클 메서드 대신 라이프사이클 훅을 사용하는 것이 권장

TDD

Test-Driven Development
소프트웨어 개발 방법론
코드를 작성하기 전에 테스트를 작성하고 이를 기반으로 코드를 개발하는 접근 방식
코드를 안정적이고 예측 가능하게 만들고, 버그를 미리 방지하며, 코드의 설계와 품질을 높이는 것
개발자는 코드 변경에 대한 자신감을 가질 수 있으며, 변경 사항이 기존 기능에 영향을 미치는지 여부를 빠르게 확인 가능

• Test Write
• Test Run and Fail
• Code Write
• Test Run and Pass
• Refactor
• Repeat