우리 보통 이름이 없는 가벼운 함수 만들어서 사용할때 이렇게 jsx 안에다가 적어서 사용했는데 이렇게 사용하면 용량을 꽤나 먹는다
이렇게 쓰지말고 그냥 따로 함수로 만들자
이런식으로 말이다,, 그리고
이렇게 첨부해서 사용하는 습관을 들이자
스타일도 이렇게 오브젝트 형식으로 바로 넣지 말고
이렇게 변수에 담아서, 변수를 첨부해서 사용하는 습관을 들이자
되도록이면 transform 속성을 사용해서 애니메이션을 주자
우리가 app.js 상단에 보통 import를 엄청 많이 해놓는데
이렇게 많이 import 해놓으면 컴퓨터가 읽어내리는데 많이 힘들다고 한다.. 이럴때 사용하는것이 lazy loading !
상단 react에 lazy, suspense 2가지를 먼저 import를 해주고 !
let Detail = lazy(()=>{ import ('.Detail.js) });
"내가 Detail.js 컴포넌트가 필요해졌을 때 ! import해주세요"
그러면 이제 import 부분 설정은 끝났고 이제 suspense를 설정해보자
app.js 안에있는
Detail 컴포넌트 부분으로 내려와서 suspense로 감싸주면 된다
이제 Detail 컴포넌트가 천천히 로딩되면
fallback= 이라고 적어놓은것이 로딩중에 보일것이다
내가 만들어놓은 로딩중에 보여야할 메세지들 이런게 잘 되는지 확인하고 싶다면 개발자 도구를 설치하자
요로케 생겼다 !
이 기능을 크롬에 설치하면 개발자 도구에서 components 탭이 생기고
내가 만들어놓은 모든 컴포넌트들이 보여지며 개별로 확인할수가 있다
그리고!!
더 좋은점은 컴포넌트를 누르면 옆에 어떤것을 Props로 받아왔는지, redux store에서 어떤 state를 받아왔는지 또한 다 볼수있다
Profiler 탭에서는 내가 페이지를 이동하거나 새로고칠때 렌더링되는 컴포넌트들을 표기해주는데
여기서 어떤게 렌더링이 오래걸리는지,여러번 반복되는지 등
문제를 이르키는지 알수있다
