수정하기 - React.memo는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`React.memo`는 React에서 제공하는 고차 컴포넌트(Higher Order Component)로, 주로 성능 최적화를 위해 사용됩니다. 이 기능은 컴포넌트가 동일한 props를 받을 때, 불필요한 리렌더링을 방지하여 애플리케이션의 성능을 향상시키는 데 도움을 줍니다.           기본 개념    React는 기본적으로 상태(state)나 props가 변경될 때마다 컴포넌트를 리렌더링합니다. 그러나 어떤 경우에는 props가 변경되지 않았음에도 불구하고 컴포넌트가 리렌더링되는 것이 비효율적일 수 있습니다. `React.memo`는 이러한 상황에서 유용하게 사용됩니다.           사용법    `React.memo`는 함수형 컴포넌트를 감싸는 형태로 사용됩니다. 다음은 기본적인 사용 예시입니다.    ```javascript  import React from 'react';    const MyComponent = React.memo(({ name }) => {    console.log('Rendering:', name);    return <div>Hello, {name}!</div>;  });  ```    위의 예시에서 `MyComponent`는 `name` prop이 변경되지 않는 한 리렌더링되지 않습니다. 만약 부모 컴포넌트가 리렌더링되더라도 `name` prop이 동일하다면 `MyComponent`는 다시 렌더링되지 않습니다.           커스텀 비교 함수    기본적으로 `React.memo`는 얕은 비교(shallow comparison)를 사용하여 props의 변경 여부를 판단합니다. 그러나 필요에 따라 커스텀 비교 함수를 제공하여 더 복잡한 비교 로직을 구현할 수 있습니다. 다음은 그 예시입니다.    ```javascript  const MyComponent = React.memo(    ({ name, age }) => {      console.log('Rendering:', name);      return <div>{name} is {age} years old.</div>;    },    (prevProps, nextProps) => {      return prevProps.name === nextProps.name && prevProps.age === nextProps.age;    }  );  ```    위의 예시에서 커스텀 비교 함수는 `name`과 `age`가 모두 동일할 때만 리렌더링을 방지합니다.           언제 사용해야 할까?    `React.memo`는 다음과 같은 경우에 유용합니다:    1.   리렌더링 비용이 높은 컴포넌트  : 복잡한 UI를 렌더링하는 컴포넌트는 리렌더링 비용이 크므로, `React.memo`를 사용하여 성능을 최적화할 수 있습니다.  2.   상태가 자주 변경되는 부모 컴포넌트  : 부모 컴포넌트의 상태가 자주 변경되지만, 자식 컴포넌트의 props는 자주 변경되지 않는 경우에 유용합니다.  3.   <a href='https://sangseek.com/sangseeks/불변성 유지/ko'>불변성 유지</a>  : props가 불변성을 유지하는 경우, `React.memo`를 통해 성능을 더욱 향상시킬 수 있습니다.           주의사항    - `React.memo`는 모든 경우에 성능을 향상시키는 것은 아닙니다. 간단한 컴포넌트나 props가 자주 변경되는 경우에는 오히려 성능 저하를 초래할 수 있습니다.  - `React.memo`는 함수형 컴포넌트에만 적용됩니다. <a href='https://sangseek.com/sangseeks/클래스형 컴포넌트/ko'>클래스형 컴포넌트</a>에는 사용할 수 없습니다.  - `React.memo`는 props가 변경되지 않는 경우에만 리렌더링을 방지하므로, 상태가 변경되는 경우에는 여전히 리렌더링이 발생합니다.           결론    `React.memo`는 React 애플리케이션에서 성능을 최적화하는 데 매우 유용한 도구입니다. 적절한 상황에서 사용하면 불필요한 리렌더링을 방지하고, 사용자 경험을 개선할 수 있습니다. 그러나 모든 컴포넌트에 적용하는 것은 바람직하지 않으며, 성능을 측정하고 최적화할 필요가 있습니다.