핵심요약 - 익명 화살표 기능을 사용하지 않고도 핸들러에서 렌더링 시간 값에 액세스할 수 있습니다. 힌트 — 데이터 속성을 활용하십시오.

React는 여러 측면에서 훌륭하며 우리가 덜 독단적(또는 비독점적)되어 다양한 방식으로 작업을 수행할 수 있는 자유를 제공합니다.

최근, 특히 후크가 출시된 후 커뮤니티는 참조 평등과 렌더의 익명 화살표 기능이 성능에 좋지 않은 방식에 대해 많은 소란을 피우고 있습니다.

렌더링 중에 화살표 기능을 사용하는 이유와 방법이 성능에 영향을 미치는지(또는 그렇지 않은지)에 대해 자세히 알아보지 않을 것입니다. 다음은 컨텍스트에 대한 두 개의 대조되는 트윗입니다.






shawn swyx 왕 🌟










TFW 당신은 ​​"하지만 렌더에서 함수를 만드는 것은 반패턴입니다"라는 군중이 여전히 옳지만 그들은 이유를 모른다는 것을 알고 있습니다.


오후 23:44 - 2019년 5월 23일















켄트 C. 도즈










중지하십시오! 인라인 함수는 당신의 병목이 아닙니다! twitter.com/ferdaber/statu…


오후 15:48 - 2019년 6월 4일





Ferdy Budhidharma




나는 거짓말을 하지 않을 것입니다. 많은 FUD가 있었고 누군가가 내 화살표 기능을 인라인했기 때문에 누군가 나에게서 포인트를 떨어뜨릴 수 있기 때문에 React 관련 인터뷰 테스트나 질문이 걱정됩니다.

언제

우리는 대부분 렌더링 중에 화살표 함수를 사용하여 사용자 정의 매개변수를 이벤트 핸들러에 전달합니다.

예를 들어, 이것은 일반적인 사용 사례입니다.

const MyComp = () => {
  const handleClick = (e, id) => {
    // handle click and use id to update state
  }

  // id comes from state
  return (
    <div onClick={(e) => handleClick(e, id)}>Hello World!</div>
  )
}

어떻게

여기서 익명의 화살표 기능을 사용하는 대신 데이터 속성을 활용하고 이벤트 개체의 값에 액세스할 수 있습니다.

const MyComp = () => {
  const handleClick = (e) => {
    const id = e.target.dataset.id
    // handle click and use id to update state
  }

  // id comes from state
  return (
    <div data-id={id} onClick={handleClick}>Hello World!</div>
  )
}

장점

이 접근 방식에는 많은 이점이 있습니다.

필요한 경우 콜백을 아주 쉽게 메모할 수 있습니다.

const MyComp = () => {
  // id comes from state
  const handleClick = React.useCallback((e) => {
    const id = e.target.dataset.id
    // handle click and use id to update state
  }, [id])

  return (
    <div data-id={id} onClick={handleClick}>Hello World!</div>
  )
}

vdom 비교 중에 추가 계산 비용을 절약하는 구성 요소 렌더링 중에 새 함수를 생성하지 않습니다.

React.memo를 사용하는 자식 구성 요소가 이 핸들러를 소품으로 사용하는 경우 비활성 화살표 함수의 참조 무결성 문제를 피하기 위해 사용자 지정 areEqual 메서드를 작성할 필요가 없습니다.

다른 기본 유형을 전달하더라도 모든 데이터 속성은 문자열 값을 반환한다는 점에 유의하세요. 따라서 데이터 세트에서 추출하는 동안 값을 강제하는 것이 좋습니다.

const id = e.target.dataset.id // this will be String

const id = Number(e.target.dataset.id) // convert to type if needed

어떻게 작동하는지 보여주기 위해 codesandbox를 만들었습니다 — Custom Params In Handlers

진짜 대단한데! 좋은 하루 되세요! ⚡️