홈페이지랑 텐서플로우 페이지가 있는데
텐서플로우가 계산되는데 시간이 걸려서 바로 뜰수있도록
홈페이지 실행하면 텐서플로우 페이지가 로딩되도록 하려고했음
그래서 context api로 전역 컴포넌트로 쓰니까
한 번 결과값 나오면 페이지 들어갈때마다 로딩은 안하더라고
근데 친구가 async component 쓰는게 맞다고 하길래 내가 이미 전역 컴포넌트로 써서
실행되자마자 텐서플로우로 계산되는데 굳이 쓸 필요있나 싶더라고 ㅇㅇ
async component 쓰는게 맞을까
리액트에 async component라는 개념이 잇엇나
대충 App 컴포넌트가 라우터로 홈페이지와 텐서플로우 페이지를 라우팅하는데 텐서플로우 페이지에서 실행되는 로직이 시간이 오래걸리니까 홈페이지 컴포넌트에서 실행되게 했다 이말인가?
async 컴포넌트라는게 lazy loading을 말하는건가?
1. 내가 알기로 async component라는 개념은 존재하지 않음 2. 뭘 계산하는지 모르겟지만 클라이언트에서 텐서플로우라고 이름붙일만한 연산을 시키는건 아니라고 봄
3. 만약 시키더라도 텐서플로우 페이지 안에서만 쓰이는거면 useMemo를 이용해서 한번만 첫 마운트때만 계산시키고 이후 마운트때는 계산 안시키는게 맞다고 봄(단 이 경우에는 홈페이지로 갔다가 다시 텐서플로우 페이지로 이동하면 다시 텐서플로우 계산을 해야할 거임)
CPU Intensive한 것들은 제발 서버에 요청해서 처리하든가 해 괜히 클라이언트 컴퓨터 혹사시키지 말고
4. 만약 다른 페이지에서도 쓰이는 연산이면 최상위 컴포넌트에서 useEffect나 componentDidMount에서 연산한 결과를 state에 저장하고 context API를 쓰는게 좋음
Context는 자주 안변하는 값들에 쓰고, 자주 변하는 값이면 redux나 mobx같은 상태관리 라이브러리를 따로 써야됨
글쓴이가 말하는 async는 코드 스플리팅이랑은 다른 개념인거 같음, 연산을 비동기적으로 시켜야한다는 의미의 async component인거 같은데 모르겟음
나도 async component가 있는지 몰랐는데 구글에 치니까 async 라이브러리가 또 있더라고 근데 친구가 말하는건 아마 자스 async await 말하는것 같음
async/await가 리액트에서 쓰이는 경우는 ajax말고는 없어야 됨, async/await을 잘못 사용하면 이미 unmount된 컴포넌트의 상태까지 업데이트하려고 하는 버그가 생길 확률이 높음
4번에서 useEffect 대신 useMemo 써
일단 프론트에서 async/await을 해서 받아오는 건 그닥 좋은 설계가 아닌 것 같고요. 이 경우 Context API 보단 useMemo를 사용하시는 게 맞습니다.