시작하기

로컬 IDE에서 따라하고 싶다면 여기에서 GitHub Repo를 찾을 수 있습니다 .

• clone
• cd client
• npm i
• npm start

참조 평등은 전체적으로 JavaScript와 컴퓨터 과학 모두의 기본 개념입니다. 이제 실제 시연부터 시작하겠습니다.

모바일에서 쉽게 사용할 수 있도록 기사 전체에 스크린샷을 삽입했습니다. 데스크톱에 있고 복제한 경우 실행하여 referentialEquality.js출력을 관찰하거나 아래에 포함된 JSFiddle 스니펫으로 재생합니다.

integer 1가 와 정확히 같은지 여부를 평가할 때 integer 1콘솔은 를 인쇄합니다 true. 이것은 음… the 가 the 와 엄격히 동일 integer 1 하기integer 1 때문입니다 .

두 문자열을 평가할 때 동일한 결과가 나타납니다.

분명히 이것은 동일한 값의 두 가지 기본 데이터 유형 에 대해 항상 해당됩니다 .

이제 데이터 구조는 어떻습니까? 예를 들어 동일한 키/값 쌍을 가진 두 개의 객체 리터럴? 빈 객체 리터럴은 어떻습니까?

왜 이것이 인쇄됩니까 false? 이 두 객체 리터럴이 완전히 동일한지 여부를 비교할 때 JavaScript는 각각의 메모리 주소를 사용합니다 .

즉, 이 두 개체는 동일한 값을 포함할 수 있지만 동일한 개체를 참조 하지 않습니다 . 그들은 동일하게 보이지만 메모리에서 두 개의 다른 공간을 차지합니다 .

두 개의 객체 리터럴, 두 개의 배열 리터럴 또는 두 개의 함수를 비교하는 경우에도 동일하게 적용됩니다!

이것을 더 보여주기 위해 우리는 함수를 정의할 것입니다 func. 이 함수는 익명의 함수를 반환하고 다시 다른 것을 반환합니다( 예: JSX 요소 ).

그런 다음 에서 반환된 값과 동일한 두 개의 다른 함수 firstRender및 를 할당합니다 .secondRenderfunc

React 기능 구성요소로 생각하면 funcwhile은 첫 번째 렌더링에서 내부firstRender 의 함수 이고 두 번째 렌더링에서는 내부 의 함수입니다 .secondRender

firstRender동일한 값을 반환 하고 동일한 정의에서 할당 되더라도 참조 동등성이secondRender 없습니다 . 결과적으로 구성 요소가 렌더링될 때마다 이 기능을 재정의합니다.

안타깝게도 JavaScript에서는 Python과 같이 이러한 메모리 주소를 인쇄하는 것이 쉽지 않지만 참조 대 값에 대한 좀 더 자세한 설명은 freeCodeCamp에서 이 기사를 살펴보십시오 .

이 주제는 복잡해질 수 있으며 오늘 밤에는 이에 대해 수업을 가르칠 필요가 없습니다. 따라서 지금은 다음을 기억하십시오.

• 기본 데이터 유형 ===기본 데이터 유형
• 데이터 구조 !==데이터 구조.

시작 코드

앱을 실행한 후 BookDetails.jsx구성 요소를 열고 다시 저장합니다. WARNINGReact 개발 서버에서 가장 먼저 알아차릴 수 있는 것은 젊은 개발자들이 무시하는 경향이 있는 공통 사항입니다 . 인력을 구하고 생산을 위한 코드 작성을 시작하면 린터가 create-react-app. WARNINGS로 바뀌고 ERRORS일부 린터는 이러한 문제를 해결하기 전에 푸시를 허용하지 않습니다 ERRORS.

그러니 무시하기보다는 어떻게 치료해야 하는지 알아보자.

참고: 이것을 생성하려면 먼저 다시 저장해야 할 수도 있습니다.BookDetails.jsxWARNING

React Docs 를 파헤치면 다음과 같이 반쯤 혼란스러운 제안 솔루션을 해독할 수 있습니다 WARNING.

1. 내부에 함수 정의를 포함합니다 useEffect.

• 재정의하지 않는 한 이 함수를 다른 곳에서 호출할 수 없습니다.

• 이렇게 하면 상태 또는 소품이 변경될 useEffect 때마다 트리거 되어 때때로 무한 재렌더링이 발생합니다. 그리고 우리의 경우 API 호출 후 상태 설정기 함수를 호출하기 때문에 무한한 엔드포인트 요청으로 API에 과부하가 걸릴 수 있습니다.

• 함수가 호출되지 않습니다.

• 구성 요소가 처음 렌더링될 때 를 트리거하는 함수를 정의합니다. 그러면 useEffect구성 요소가 다시 렌더링되고 함수가 다시 정의되며 가 트리거되어 useEffect구성 요소가 다시 렌더링됩니다. 기능을 재정의합니다…

가장 간단하고 선호되는 솔루션은 '포함'하는 것입니다. 즉, getBookDetails함수 정의를 useEffect. 이것은 캡슐화 로 알려진 객체 지향 프로그래밍 원칙을 준수합니다 .

그러나 다른 곳에서 함수를 호출해야 한다는 것을 알고 있다고 가정해 보겠습니다. 나중에 다시 정의해야 할까요? 그것은 우리를 매우 건조하지 않습니다.

함수 참조를 포함하도록 종속성 배열을 변경해 보겠습니다. useEffect이제 이렇게 보일 것입니다 .

그리고 . getBookDetails_ _useEffect _

이제 우리는 새로운WARNING

useCallback 후크 입력

요컨대, useCallback후크를 사용하면 구성 요소를 다시 렌더링하는 사이에 기능을 캐시하거나 '메모화'할 수 있습니다. 와 유사한 작업을 수행합니다 useMemo. 뉘앙스에 대해서는 다른 기사에서 다룰 것입니다.

이 핵심 내용에 관심이 있다면 React 문서 에서 자세한 내용을 읽을 수 있습니다 .

그들의 경고를 주목하십시오:

useCallback성능 최적화 로만 의존해야 합니다 . 코드가 없이 작동하지 않으면 근본적인 문제를 찾아 먼저 수정하십시오. 그런 다음 추가하여 성능을 향상시킬 수 있습니다 useCallback.

useCallback통사론

useCallback의 구문은 useEffect우리가 이미 알고 있는 의 구문과 매우 유사합니다. 각각의 골격을 보십시오.

약간의 차이점은 익명 함수 에 함수를 실행하라고useEffect 지시하는 반면 와 함께 반환 값을 다른 곳에서 호출할 참조에 할당한다는 것입니다 .useCallback

useCallback 사용

useCallback먼저 에서 가져옵니다 'react'. 새 줄을 추가하는 것보다 다른 수입품과 함께 해체하는 것이 가장 좋습니다.

이제 함수 호출 getBookDetails에서 반환된 값에 할당할 수 있습니다 useCallback.

그런 다음 에 대한 모든 구문을 추가합니다 useCallback. 종속성 배열을 기억하십시오!

이 예에서는 async매개변수 앞에 필요합니다.

마지막으로 함수의 논리를 코드 블록에 추가합니다.

일단 저장하면… 또 다른 WARNING.

종속성 배열이 id변수를 추적해야 하는 이유는 무엇입니까?

이것을 통해 생각해 봅시다.

• 값이 id변경 되면 getBookDetails다른 엔드포인트에 도달해야 하므로 React는 이를 재정의해야 합니다. getBookDetails문자 그대로 의 정의는 의 값에 따라 다릅니다id .

그리고 마지막으로 그게 다입니다! React 개발 서버에서 녹색을 볼 수 있습니다. 행복한 린터는 행복한 시니어 개발자입니다. 그리고 행복한 시니어 개발자는 행복한 당신입니다!

저는 항상 새로운 친구와 동료를 찾고 있습니다. 이 기사가 도움이 되었고 연결하고 싶다면 웹상의 내 집에서 나를 찾을 수 있습니다.

GitHub | 트위터 | 링크드인 | 웹사이트

자원

• 참조 평등
• JavaScript 기본 데이터 유형과 데이터 구조
• 캡슐화
• useCallback
• 반응 문서