반응형 개발/React52 React.memo - Memoization을 이용한 불필요 리렌더링 없애기 우선 비슷한 상황을 부트캠프 4주 프로젝트때 겪은 일이 있다. 위에서 보면 메모란에 타자를 칠때마자 사진이 깜빡이는 것을 확인할 수 있다. 이때 React.memo로 해결했었다. React.memo 간단히 설명하면 props가 변하지 않는데 side effect에 의해 리렌더링 되는 컴포넌트라면 리렌더링을 막을 필요가 있다. (위 gif처럼 메모란에 타이핑할때마다 사진컴포넌트가 리렌더링 되는 경우) 이럴때는 리렌더링이 불필요한 컴포넌트의 이전 props와 다음 props를 비교하여 , props변화가 없다면 이전 props를 사용하도록 메모이제이션 할 수 있다. 이를 가능하게 하는 것이 React.memo이다. 팀원분이 타이머 업데이트와 페이지 업데이트를 분리하고 싶은데, useMemo로 해결이 안된다고.. 2022. 9. 18. Functional update of setState -> state의 변화가 state를 참조하지 않게 됨 이렇게 숫자가 혼자서 계속 올라가는 것을 만드려면 어떻게 해야 할까?? 시도하다보면 useEffect를 쓰는 쪽으로 생각이 흘러간다. 처음에는 다음과 같이 작성하였다. useEffect(() => { setInterval(() => { setCount(count); }, 1000); }, [count]); return ( {count} setCount(initialCount)}>Reset setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ); 그러니 이러한 버그가 나타났다. 그래서 clean-up함수를 추가해주었다. (clean-up함수가 언마운트시가 아니라, 업데이트시 실행된다는 것을 알 수 있음, 참고.. 2022. 8. 13. useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! 들어가기에 앞서 결론부터 말하자면 공식문서에 나와있다 실제 실험을 통해 페이지 이동(unmount)이 안되어도 setInterval을 정리하여 버그를 차단함을 알 수 있었다. 1. clean-up 없을 때 import { useEffect, useState } from "react"; const initialCount = 0; function FrequentlyChangableDependencyInEffect() { const [count, setCount] = useState(initialCount); useEffect(() => { setInterval(() => { setCount(count); }, 10.. 2022. 8. 12. Flux 패턴 Flux패턴은 MVC모델의 단점을 보완하기 위해 페북에서 만든 새로운 패턴이다. MVC 패턴은 보는것과 같이 양방향이다. 양방향 데이터 흐름은 복잡하지 않은 어플리케이션에서는 문제가 없겠지만, 규모가 큰 어플리케이션에서는 view가 또다른 model을 업데이트 시키고 업데이트 된 model이 view2를 업데이트 시키고... 이렇게 되면 개발자들이 어플리케이션의 패턴을 예측하기가 힘들어진다. 페북에서는 이를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 도입했다. 리액트에서 무조건 부모컴포넌트만 자식컴포넌트에게 props를 전달할 수 있는 규칙도 Flux 패턴중 하나이다. Action : 새로 발생한 액션타입과 페이로드를 Dispatcher로 전달 Dispatcher : 액션을 스토어에 전달 Sto.. 2022. 8. 11. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 반응형
