리액트를 하면서 생기는 리렌더링문제들을 위해서 쓰는 메소드들에 대해 짤막한 강의를 해주셨다!
솔직히 해당 메소드들은 사용한적이 없는.. 그런 메소드들인데, 최종때 하나정도는 사용할 수 있다면 좋을 것같다.
그리고 promise의 then 정도까진 사용하나 catch를 사용해서 예외처리부분을 놓치지 말아야한다는 것을 알려주셨는데, 생각해보니까 then과 catch는 세트야! 라고 공부했었는데 정작 실전에 들어갔을 땐 세트로 사용하지 않았던 부분들이 많았어서 이번 기회에... 한번 더 짚고 넘어간다..ㅠㅠ
오늘의 강의 주제
memoization를 위해서 사용하는 메소드는 > react.memo, useCallback, useMemo이다.
즉 라이프 사이클 최적화를 위해서 사용하는 메소드!!!
useCallback과 useMemo는 최종 프로젝트에서 사용할 수 있도록 하는 것이 좋다!!
리렌더링은
컴포넌트에서 state가 바뀔 때, 내려받은 props가 변경될 때, 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링이 된다.
리렌더링되는 부분들은 비효율적인 요소이기 때문에 잡고 넘어가야 하는 부분이다.
즉 이런 불필요한 렌더링을 잡기 위해서
memo : 컴포넌트를 캐싱
useCallback : 함수를 캐싱
useMemo : 값(value)을 캐싱
사용한다.
memo (react.memo)
리렌더링 조건 중인 부모 컴포넌트가 리렌더링되어 자식 컴포넌트 역시 리렌더링되는 부분을 잡아줄 수 있는 hook이다.
? memo는 자식컴포넌트한테 다 써주어야하나요?
반드시 그런건 아니다. 임시 저장 데이터 영역을 모든 하위 데이터에게 써줘야 하는지는 확인해보아야 하기 때문이다.
만약 가볍다면 쓰지 않은 것이 낫다.
useCallback
react.memo를 컴포넌트를 메모이제이션(기억)했다면 useCallback은 인자로 들어오는 함수 자체를 기억한다.
- then만 쓰는 사람들이 있는데 catch를 써서 예외사항도 처리해주어야 한다. 그렇지 않을 경우… 예외처리가 된 값들이 날라가면…시말서 감이라는 것이다…
객체에 같은 값이 들어간다고 해도 각각의 객첸 다른 것이다. 왜냐하면 자바스크립트에서는 주소를 저장하기 때문에 객체는 각각 다른 것이라고 인식한다.
function도 객체이기 때문에 다시 렌더링이 되면 부모부터 다시 할당되는 상황이 벌어지고, props가 바뀌었다고 인식하기 때문이다. 값을 바라보는 것이 아니라 주소를 바라보기 때문이다.
따라서 이런 props 변경으로 인한 리렌더링을 고치기 위해서 useCallback을 사용한다.
useMemo
값을 기억한다! 라고 하는데 쉽게 말해서 객체, 배열, 함수들을 기억한다고 생각하면 된다.
useCallback과 똑같이 사용하나 return 반환할 함수() 가 들어가는 것이라고 생각하면 된다.
