167. 첫 번째 요약

함수 안에 함수를 만들고 이 함수를 props를 통해 컴포넌트에 전달하면 새로운 함수 객체를 얻을 수 있다

하지만 이렇게 되면 React.memo를 통한 도움은 얻을 수 없다

객체는 참조값이고 React.memo가 내부적으로 실행하는 등호를 통한 비교는 원시값에 대해서는 통용되지 않기 때문이다

 

 

---

강의 대본

 

자, 이 강의를 시작하기 전에

지금까지 배운 것을 요약해보죠

모두 중요한 것이므로 명확히 이해해야 합니다

리액트 앱에서는 컴포넌트를 통해 작업을 수행합니다

최신 리액트에서는 주로 함수 컴포넌트와 함께 할 겁니다

이런 컴포넌트는, 결국 하나의 작업을 수행하는데

이들이 반환하는 JSX 코드입니다

이 것은 리액트에게, 컴포넌트의 출력이

무엇인지를 알려줍니다

이제 여러분의 리액트 컴포넌트에서는

상태와 props, 컨텍스트를 이용해 작업할 수 있고

props와 컨텍스트는 결국 상태의 변경으로

이어지기 때문에

컴포넌트의 변경과

컴포넌트에 영향을 주는, 또는

어플리케이션 일부에 영향을 미치는 데이터를 변경하게 됩니다

컴포넌트에서 상태를 변경할 때마다

이 변경된 상태가 있는 컴포넌트는 재평가됩니다

즉 이 말은

컴포넌트 함수가 재실행된다는 의미입니다

따라서 모든 코드가 재실행되고

이렇게 되면 새로운 출력값을 얻을 수 있죠

출력값은 이전과 동일할 수 있지만

실제로는 조금 다릅니다

예를 들어서, 단락 전체가 렌더링이 되거나 안될 수도 있습니다

여기의 DemoOutput과 같은 컴포넌트의 텍스트가

렌더링되지 않을 수도 있죠

리액트는 단순히 최신 평가의 결과를 가져와서

직전 평가의 결과와 비교합니다

이는 모든 컴포넌트에 해당됩니다

그리고 확인된 모든 변경 사항이나 차이점을

우리의 경우에는 리액트 DOM에 전달합니다

이 리액트 DOM을 통해

우리는 이 index.js 파일을 렌더링하기 때문입니다

그리고 리액트 DOM은 이 변경 사항을

브라우저의 실제 DOM에 적용하고

변경되지 않은 것들은 그대로 둡니다

이제 리액트가 컴포넌트를 재평가할 때

단순히 컴포넌트 재평가에서 그치지 않고

전체 함수를 재실행하고

이를 통해 코드를 전부 리빌드합니다

이 jsx 코드가 최신 스냅샷의 출력 결과를

리빌드하는 것이죠

그리고 이 jsx 코드에 있는

모든 컴포넌트를 재실행합니다

이 경우에서는 DemoOutput과

버튼 컴포넌트를 재실행합니다

이제 하위 컴포넌트의 불필요한 재실행을 막기 위해

React.memo를 통해 리액트에게

props가 실제로 변경되었을 경우에만

새로운 값이 들어왔을 경우에만

컴포넌트 함수를 재실행하고

새 값이 없다면

함수를 재실행하지 않도록 할 수 있습니다

자, 컴포넌트의 재평가는

즉 컴포넌트 함수 전체의 재실행을 의미하는데요

이, 함수에 있는 모든 것들이

다시 실행된다는 사실을 알지 못한다면

이상한 결과를 초래할 수 있습니다

예를 들어보죠

함수 안에 함수를 만들고

이 함수를 props를 통해 컴포넌트에 전달하면

새로운 함수 객체를 얻을 수 있겠죠

이렇게 되면 React.memo를 통한 도움은 얻을 수 없습니다

객체는 참조값이고

React.memo가 내부적으로 실행하는

등호를 통한 비교는

원시값에 대해서는 통용되지 않기 때문입니다

따라서 이런 문제는 없을 것입니다

이럴 때 useCallback을 사용하면 됩니다

useCallback을 통해, 여러분은 리액트에게

이 함수를 저장하고, 이를 둘러싼 함수가

재실행되어도 특정 의존성이 변경되는 것이 아니면

함수 재생성을 막을 수가 있습니다

지금까지 우리가 배운 것이 이 것이죠

하지만 여전히 몇 가지 궁금증이 남죠

예를 들어서, 상태 변경으로 인해

App 함수가 재실행된다면

useState 역시 계속적으로 실행된다는 것인데

이 것은 상태 초기화를 의미하는 건 아닐까요?

지금까지 왜 이런 문제는 없었을까요?

이런 것과 같은

일반적인 상태에 대한 문제는

다음 강의에서 더 자세히 알아보겠습니다