React에서 자바스크립트 클로저 사용하기

클로저는 다른 함수(외부 함수) 내에 포함된 함수가 외부 함수 외부에서 반환되고 호출되는 Javascript 기능입니다.

내부 함수가 해당 범위(어휘 범위) 외부의 변수에 대한 액세스를 유지할 때 클로저가 형성됩니다. 외부 함수가 실행된 후에도 외부 함수의 변수 및 인수에 액세스할 수 있습니다.

세율을 기준으로 주류 및 무알코올 음료에 대한 세금을 계산하는 세금 계산기 폐쇄 기능을 만들어 보겠습니다.

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

보시다시피 각 음료는 알코올 음료인지 무알코올 음료인지에 따라 세율을 항상 기억합니다. 즉, 반환된 함수는 TaxCalculator 외부에서 호출되며 기본 TaxCalculator 기능이 실행되었습니다.

React js, JavaScript UI 라이브러리에서 이벤트 핸들러는 JSX에서 인라인으로 선언됩니다.

<button  onClick={handleClick}>Click me</button> 

이벤트 핸들러에 인수가 있으면 함수 내에서 호출됩니다.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

handleAction을 onclick 이벤트 핸들러에 할당할 때 화살표 함수로 캡슐화됩니다.

클로저를 사용하면 작업 인수를 사용하여 간단히 handlerAction을 호출한 다음 작업 인수를 잡고 나머지 작업을 수행하는 내부 함수를 반환할 수 있습니다.

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

OnClick 이벤트에서 직접 handlerAction을 호출하는 방법에 주목하세요. 또한 스위치를 사용하여 필요한 작업을 수행하는 함수를 반환하도록 handlerAction 함수를 리팩토링했음을 확인하세요.

handleAction은 구성 요소가 마운트될 때 호출되고, 첫 번째 렌더링 중에 핸들Action(handleAction)이 실행되었음에도 불구하고 handlerAction에서 반환된 함수가 handlerAction의 인수 값을 잡고 유지할 때 클로저가 발생합니다.
이는 Javascript에서 이벤트를 처리하는 깔끔한 방법입니다. 어떻게 생각하시나요?

위 내용은 React에서 자바스크립트 클로저 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!