반응형 React.Memo2 React.memo - Memoization을 이용한 불필요 리렌더링 없애기 우선 비슷한 상황을 부트캠프 4주 프로젝트때 겪은 일이 있다. 위에서 보면 메모란에 타자를 칠때마자 사진이 깜빡이는 것을 확인할 수 있다. 이때 React.memo로 해결했었다. React.memo 간단히 설명하면 props가 변하지 않는데 side effect에 의해 리렌더링 되는 컴포넌트라면 리렌더링을 막을 필요가 있다. (위 gif처럼 메모란에 타이핑할때마다 사진컴포넌트가 리렌더링 되는 경우) 이럴때는 리렌더링이 불필요한 컴포넌트의 이전 props와 다음 props를 비교하여 , props변화가 없다면 이전 props를 사용하도록 메모이제이션 할 수 있다. 이를 가능하게 하는 것이 React.memo이다. 팀원분이 타이머 업데이트와 페이지 업데이트를 분리하고 싶은데, useMemo로 해결이 안된다고.. 2022. 9. 18. useMemo와 React.memo를 이용한 최적화 변화가 없다면 굳이 똑같은 연산을 하거나, 리렌더링을 할 필요가 없다. 그냥 이전에 쓰던 데이터를 다시 쓰면 된다. 리액트에는 값이 바뀌었을때만 리렌더링 혹은 연산 을 하게 하는 기능이 있다. 바로 useMemo, useCallback, React.memo이다. UseMemo와 useCallback useMemo와 useCallback은 사용법이 useEffect와 흡사하다. 두번째 인자에 들어간 배열의 값이 바뀌면 첫번째 인자인 콜백이 실행된다. 아래사진은 내가 useMemo를 사용한 방식이다. 이렇게 하면 tags[0] 혹은 tags[1]의 값이 바뀌었을때만 변수 memoTags에 바뀐 tags의 값을 할당한다. useMemo가 '값'을 반환한다면 useCallback은 '함수'를 반환한다. 핵심은 .. 2021. 12. 19. 이전 1 다음 반응형
