`이 리렌더링됩니다.
-
-```javascript
-function FriendList({ friends }) {
- const onlineCount = useFriendOnlineCount();
- if (friends.length === 0) {
- return ;
- }
- return (
-
- {onlineCount} online
- {friends.map((friend) => (
-
- ))}
-
-
- );
-}
-```
-[_React 컴파일러 플레이그라운드에서 이 예시를 확인하세요_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA).
-
-React 컴파일러는 상태 변경 시 앱에서 관련된 부분만 리렌더링되도록 수동 메모이제이션과 동등한 기능을 자동으로 적용합니다. 이를 "세분화된 반응성Fine-Grained Reactivity"이라고도 부릅니다. 위 예시에서 React 컴파일러는 `friends`가 변경되더라도 ``의 반환 값이 재사용될 수 있음을 결정하고, JSX를 재생성하지 않고 ``의 리렌더링도 피할 수 있습니다.
-
-#### 비용이 많이 드는 계산 메모이제이션 {/*expensive-calculations-also-get-memoized*/}
-
-컴파일러는 렌더링 도중 비용이 많이 드는 계산에 대해 자동으로 메모이제이션을 적용할 수도 있습니다.
-
-```js
-// 컴포넌트나 Hook이 아니기 때문에 React 컴파일러에 의해 **메모이제이션 되지 않습니다.**
-function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
-
-// 컴포넌트이기 때문에 React 컴파일러에 의해 메모이제이션 됩니다.
-function TableContainer({ items }) {
- // 이 함수 호출은 메모이제이션 될 것입니다.
- const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
- // ...
-}
-```
-[_React 컴파일러 플레이그라운드에서 이 예시를 확인하세요_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA).
-
-그러나 `expensivelyProcessAReallyLargeArrayOfObjects`가 실제로 비용이 많이 드는 함수라면 다음과 같은 이유로 React 외부에서 해당 함수의 별도 메모이제이션을 고려해야 할 수도 있습니다.
-
-- React 컴파일러는 React 컴포넌트와 Hook만 메모이제이션 하며, 모든 함수를 메모이제이션 하지 않습니다.
-- React 컴파일러의 메모이제이션은 여러 컴포넌트나 Hook 사이에서 공유되지 않습니다.
-
-따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되고 있다면 동일한 아이템이 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행될 수 있습니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)을 통해 해당 계산이 실제로 비용이 많이 드는지 확인하는 것이 좋습니다.
-