$$config title: [ReactJS] Memorize (a.k.a. memo) keywords: - ReactJS - Memorize - ... $$ # Memorize란? : Memorize(`React.memo()`)는 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛰게 도와주는 고차 컴포넌트. 즉, 상태가 변하지 않아서 재생성하지 않을 것들을 메모이징(기억)해서 후에 다시 재생성될 때, 재생성(리렌더링) 하지 않음. > 예시 : Props.html ```js function Btn({text, onClick}){ console.log(text, "was rendered"); return ( ); } function App(){ const [value, setValue] = React.useState("Save Chagnes"); const changeValue = () => setValue("Revert Changes"); return (

); } ``` 여기서 보이는 `console.log(text, "was rendered");` 로 찍히는 값을 보면 ``` (버튼을 누르기 전) Save Chages was rendered Continue was rendered (버튼을 누른 후) Revert Chages was rendered Continue was rendered ``` 이런 식으로 찍히는데 `Continue was rendered`를 통해서 `` 컴포넌트가 불필요하게 재생성되는 것을 알 수 있음. => 이 문제를 해결하기 위해서 App 함수 위에 Memorize(`React.memo()`) 를 사용함. # React.memo() 사용 방법 ? 1. 부모 컴포넌트 위에 `const 새로운 변수 = React.memo(메모라이즈할 컴포넌트명)`을 적음. 2. 메모라이즈할 컴포넌트를 " 새로운 변수명 "으로 바꿔서 작성함. --- 예시 ```js //이것이 중요! ? const MemorizeBtn = React.memo(Btn); function App(){ const [value, setValue] = React.useState("Save Chagnes"); const changeValue = () => setValue("Revert Changes"); return (

//여기의 컴포넌트 명을 바꾸기 ?

); } ```