React 구성 요소에서 화살표 함수 사용

1. React 클래스 구성 요소의 화살표 기능
2. React 기능 구성 요소의 화살표 기능
3. React의 화살표 함수 구문
4. React에서 화살표 함수를 사용할 때의 이점

화살표 함수는 최근에 JavaScript에 추가되었지만 이미 수백만 명의 개발자가 JavaScript 코드를 작성하는 방식을 변경했습니다.

아시다시피 React 웹 애플리케이션은 여러 구성 요소로 구성됩니다. 종종 구성 요소가 재사용됩니다. 예를 들어 전자 상거래 상점에는 <제품> 하위 구성 요소의 여러 인스턴스가 있을 수 있습니다.

React 클래스 구성 요소의 화살표 기능

React를 사용하면 클래스 구문을 사용하여 구성 요소를 정의할 수 있습니다. React에서 this 키워드를 사용하려면 생성자에서 바인딩해야 합니다. 그렇지 않으면 this 키워드를 참조하는 일반 함수는 undefined를 반환합니다.

암호:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e) {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Log to the console</button>;
  }
}

일반 함수에서 this 키워드를 참조해야 하는 경우 생성자에 바인딩해야 합니다. 이렇게 하지 않으면 handleClick() 함수가 App 구성 요소를 콘솔에 기록하지 않고 정의되지 않음입니다.

클래스 구성 요소의 화살표 함수는 다르게 작동합니다. this 키워드를 사용하는 것이 훨씬 더 간단합니다.

키워드는 화살표 기능이 존재하는 환경, <App> 구성 요소 자체를 나타냅니다. 예를 들어 위의 구성 요소를 약간 다시 작성하면 동작이 크게 바뀔 수 있습니다.

암호:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <button onClick={(e) => console.log(this)}>Log to the console</button>
    );
  }
}

CodeSandbox의 라이브 데모를 열고 버튼을 클릭하면 콘솔에 클래스 구성 요소가 표시되는 것을 볼 수 있습니다.

React 기능 구성 요소의 화살표 기능

기능 구성 요소에는 this 키워드가 없으므로 화살표와 일반 구문 간의 차이가 훨씬 작습니다. 기능적 구성 요소에서 화살표 함수는 React에서 이벤트 핸들러를 작성하는 더 깨끗하고 간결한 방법입니다.

이 함수는 JavaScript에서 인라인 이벤트 핸들러를 작성하기 위해 기능 구성 요소에서 자주 사용됩니다. 예를 살펴보겠습니다.

export default function App() {
  return (
    <div className="App">
      <button onClick={() => alert("hello!")}>Create an alert</button>
    </div>
  );
}

화살표 함수를 변수에 저장하고 이러한 이벤트 핸들러를 props로 전달할 수도 있습니다.

export default function App() {
  const handler = () => console.log("An example string");
  return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

함수 구성 요소를 화살표 함수로 작성할 수도 있습니다.

const App = () => {
    return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

React의 화살표 함수 구문

React는 JavaScript 기반 라이브러리입니다. 따라서 JSX 외부에서 화살표 기능을 사용할 수 있습니다.

React 구성 요소에서 화살표 함수를 사용하는 구문은 매우 간단합니다. 인수를 취하지 않고 하나의 표현식을 반환하는 화살표 함수의 간단한 예를 살펴보겠습니다.

const arrowFunction = () => 2+2

이 경우 arrowFunction 변수에 함수 정의에 대한 참조를 저장했습니다.

이 함수는 매개 변수를 사용하지 않으므로 빈 괄호 ()를 사용하고 함수 인수와 본문 사이에 화살표 =>를 사용합니다. 함수 본문이 한 줄에 하나의 표현식이면 함수 본문을 구분하기 위해 중괄호를 사용할 필요가 없습니다.

또한 return 문을 명시적으로 작성할 필요가 없습니다. 묵시적입니다. 위의 함수는 2+2 표현식의 결과를 반환합니다.

하나의 매개변수를 전달할 때

화살표 함수의 구문은 위에서 설명한 패턴을 따르지만 약간의 차이가 있습니다. 예를 살펴보겠습니다.

const arrowFunction = argument => argument+2

하나의 매개변수만 전달하는 경우 괄호로 묶거나 건너뛸 수 있습니다. 어느 쪽이든 화살표 기능이 작동합니다.

두 개 이상의 매개변수를 전달할 때

여러 매개변수를 전달할 때는 괄호로 묶어야 합니다.

const arrowFunction = (argumentOne, argumentTwo) => argumentOne+argumentTwo

스프레드 연산자를 사용하여 많은 항목이 포함된 배열을 한 번에 모두 전달할 수 있습니다.

const args = [5,10]
const arrowFunction = (...args) => argumentOne+argumentTwo

여러 문을 사용하는 경우

이제 좀 더 복잡한 화살표 함수를 살펴보겠습니다. React에서 작성하는 대부분의 함수 본문에는 여러 줄에 여러 문이 포함되어 있습니다.

여러 문으로 화살표 함수를 작성할 때 함수 본문을 중괄호로 묶어야 합니다.

const arrowFunction = (argumentOne, argumentTwo) => {
    console.log("doing calculation")
    return argumentOne+argumentTwo
    }

이 경우 return 문도 명시적으로 작성해야 합니다.

React에서 화살표 함수를 사용할 때의 이점

화살표 함수는 React에서 많은 이점을 제공합니다. 아마도 가장 큰 것은 React에서 기능적 구성 요소를 생성하기 위한 더 쉬운 구문을 제공한다는 것입니다. 화살표 기능을 사용하여 몇 분 안에 간단한 구성 요소를 정의할 수 있습니다.

화살표 함수는 클래스 구성 요소에서 콜백으로 사용하기도 쉽습니다. 화살표 함수는 함수 본문 내에서 this 값을 변경하지 않기 때문에 종종 this 키워드와 관련된 버그를 방지합니다. 항상 클래스의 인스턴스를 참조합니다.

그렇지 않으면 화살표 함수는 많은 간단한 인라인 이벤트 핸들러 및 콜백 함수를 작성하는 데 시간을 절약해 줍니다.