-
[React] memo function개인공부/react 2024. 2. 14. 19:06반응형
ReactJS에는 memo라는 유용한 기능이 있다.
만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다.
특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데
이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다.
해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고
변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다.
<React.memo를 사용하지 않을 경우>
function Btn({ text, onChangeValue }) { console.log(text, "이 렌더링되었습니다."); return ( <button onClick={onChangeValue} style={{ backgroundColor: "tomato", color: "white", padding: "15px 25px", borderRadius: 20, border: 0, margin: "15px", }} > {text} </button> ); } ....... //생략 ....... function App() { const [value, setValue] = React.useState("Front Buttons"); const changedValue = () => setValue("Back Button"); return ( <div> <Btn text={value} onChangeValue={changedValue} /> <Btn text="ConfirmButton" /> </div> ); } ReactDOM.render(<App />, root);
<결과>
처음 두번의 렌더링은 초기 컴포넌트를 생성하는것으로 생략하고,
세번째와 네번째 라인을 보면 클릭시 매번 렌더링이 호출되어, 새로 컴포넌트가 그리지는것을 볼 수 있습니다.
<React.memo를 사용한 경우>
const MemoBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Front Buttons"); const changeValue = () => setValue("Back Button"); return ( <div> <MemoBtn text={value} changeValue={changeValue} /> <MemoBtn text="ConfirmButton" /> </div> ); } ReactDOM.render(<App />, root);
<결과>
앞의 React.memo함수를 사용하지않을 경우와 비교했을 때, 변경된 부분만 새로 컴포넌트가 그려집니다.
반응형'개인공부 > react' 카테고리의 다른 글
[React] Typescript #01 (0) 2024.02.22 [React] props (0) 2024.02.14