return에는 뭐가 많이 없는게 좋다는 말이 생각나면서 갑자기 궁금해졌다
return에서 map 돌리는게 음 나쁠까? 뭐어쨌든 반복문이니까
지금 내가 짠 코드
- return 안에서 map을 돌려서 button 만듦
- button에는 onclick 이벤트가 붙었고 본인 값을 다른 함수로 넘겨서 계산때림
그래서 검색해봤다
리랜더링 되는 경우
1. 전달받은 props 가 변경될 때
2. 자신의 state 가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. forceUpdate 함수가 실행될 때
슬픈데???? 그래서 알아본다
리액트에서 Memoization
메모이제이션이란
반복되는 연산이 많은 경우 이미 한 번 계산된 결과를 저장해두고 같은 component를 렌더링할 경우 저장해둔 값을 사용하는 방식
리액트에서 메모이제이션은 useMemo()
https://ko.reactjs.org/docs/hooks-reference.html#usememo
const wow = useMemo(() => hello(A, B), [a, b]);
- 메모이제이션된 값을 반환 (A와 a, B와 b 값이 동일하다면 미리 계산해둔 값을 뱉음)
- useMemo로 전달된 함수(
hello())는 렌더링 중에 실행 - 렌더링 중에는 하지 않는것을 이 함수 안에서 하지마시오!(사이드 이펙트는 useEffect를 쓰시오 메모쓰지말고)
- 사용법 디테일하게 적어두신 좋은 글_https://velog.io/@kysung95/짤막글-useMemo
