개발자_승딱 개발자_승딱

리액트로 프로젝트를 할때 따로 함수가 필요한 경우 그냥 만들어 줘서 썻었는데 공부를 하다보니까 최적화를 위해서는 usecallback 이란걸 써야 좋다라고 한다. 무엇인지 알아 봅세 1. hook 을 사용할때 컴포넌트가 렌더링 된다라는 것이 그함수를 실행 하는거고 그렇게 되면 그함수안에 선언 되어있던 것들이 다시 선언이 되는구나 2.함수내의 state 나 전달받은 prop 이 변경되는 경우 리렌더링 된다 1.번에 관한 부분의 비효율을 줄여주는게 useCallback 의 사용이고 2.번에 관한 부분이 usememo 라고 생각하는데 좀더 알아보자 useCallback : 메모이제이션된 함수를 반환한다. useMemo : 메모이제이션된 값을 반환한다 라는게 핵심 이라는데 메모이제이션이 뭔지 그리고 어떨때 반환..

npm i @loadable/component npm i --save-dev @types/loadable__component import loadable from '@loadable/component' const Login = loadable(()=>import("@pages/Login")) const Signup = loadable(()=>import("@pages/Signup")) 코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜, 나중에 필요할 때 불러와 사용할 수 있습니다. 이를 통하여, 페이지 로딩 속도를 개선 할 수 있습니다. 코드 스플리팅을 하게 되면 spa 의 단점인 초기에 데이터 요청 시간이 길어지는 점을 조금 보완 할수있게된다. 출처:hangem-study.r..

cra 상태에서 사용하려면 react-app-rewired 를 npm install 한다. package.json 에 들어가서 reac-scripts > react-app-rewired 로 바꿔준다(덮어씌우는거) config-overrides.js 폴더를 만들고 루트폴더에 사용할 폴더들을 적어두고 현재경로를 기준으로 설정한다. 타입스크립트를 사용할 꺼기 때문에 얘도 참고할수 있도록 tsconfig.paths.json 파일을 생성후 내용을 넣는다. tsconfig.json 파일로 들어가서 extends 에 방금 작성한 파일을 짚어넣는다. 이렇게 하면 경로를 ../../././// 이렇게 안가져와도 됨 굿 출처:velog.io/@hoo00nn/React-TypeScript-%ED%99%98%EA%B2%BD%..