[React.js] React.memo

 

리액트의 내장함수로 컴포넌트를 인수받아 최적화된 컴포넌트로 만들어서 반환해 준다

 

이 결과로 반환된 컴포넌트는 props를 기준으로 기억됨

 

https://mm-study-front.tistory.com/39

[React.js] State와 Props

 

그래서 부모가 리렌더링이 되더라도 props가 바뀌지 않으면 리렌더링이 되지 않음

 

→ 불필요한 리렌더링 방지로 웹 성능 최적화 O

 

 

 

---

사용하려면 컴포넌트 페이지 들어가서

 

const 컴포넌트 명 = () => {

  return (

 

  );

};

 

export default 컴포넌트 명 ;

 

 

리액트 내장함수니깐

 

import { memo } from "react";

 

import 해주고

const 내보낼 컴포넌트 이름 = memo(최적화 해줄 컴포넌트명);

 

해서  쓰면 된다 그러면  페이지 전체로 보면

 

 

import { memo } from "react";

const 컴포넌트 명 = () => {

  return (

 

  );

};

 

const 내보낼 컴포넌트 이름 = memo(최적화 해줄 컴포넌트명);

export default 컴포넌트 명 ;

 

이런데 이때 export 컴포넌트 명을 내보낼 컴포넌트 명으로만 바꾸면 최적화 완료

 

import { memo } from "react";

const 컴포넌트 명 = () => {

  return (

 

  );

};

 

const 내보낼 컴포넌트 이름 = memo(최적화 해줄 컴포넌트명);

export default 내보낼 컴포넌트 이름  ;

 

이때 react 개발 확장 프로그램이 설치되어 있는 사람은 컴포넌트 명과 export에서 말한 컴포넌트 이름이 다르다고 

경고문이 나올 텐데

 

Fast refresh only works when a file only exports components. Move your component(s) to a separate file.eslint(react-refresh/only-export-components)

 

실제 동작에 영향을 미치지 않아 쭉 진행하면 된다 

 

이 경고문을 안 보고 싶으면 본인 react 앱 파일 중. eslintrc.cjs 가서

 

"react-refresh/only-export-components": "off",

 

추가해주면 경고문 안 뜸

 

 

---

 

나는 코드를 진짜 간단하게 적고 싶다 하는 사람은 

import { memo } from "react";

const 컴포넌트 명 = () => {

  return (

 

  );

};

 

export default memo(  컴포넌트 명 );

 

해도 사실 상관없음 히히

 

---

여기서 중요한 점

 

memo 메서드는 얕은 비교를 해서 객체 타입 등 복잡한 컴포넌트들은 최적화가 잘 이루어지지 않음

 

해결법 1, 함수 자체를 기억시키기(다른 리액트 훅 필요)

해결법 2. memo 메서드 안에 콜백함수 추가