import React from 'react'; import { Loading } from "library"; const useLoading = (open) => { const progressLoading = () => ( ) return { progressLoading }; } export default React.memo(useLoading); function App(){ const { progressLoading } = useLoading(); } 위와 같이 되어있을때 매번 실행될텐데 커스텀훅에 React.memo로 필요하지않은 메모리제이션 코드를 추가해서 발생한 문제 React.memo 제거 후 정상 동작
참조 : https://medium.com/benx-tech-blog/react%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%8D%BC%ED%8F%AC%EB%A8%BC%EC%8A%A4-%EA%B0%9C%EC%84%A0%EA%B8%B0-%EB%B6%80%EC%A0%9C-1000%EA%B0%9C-%EC%9D%B4%EC%83%81%EC%9D%98-%EC%95%84%EC%9D%B4%ED%85%9C%EC%9D%84-%EA%B0%80%EC%A7%84-%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A5%BC-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0-8403a6c47b1c React의 렌더링 퍼포먼스 개선기 (부제: 1000개 이상의 아이템을 가진 리스트를..
axios({ url: url, responseType: 'arraybuffer' }) .then( res => { const image = btoa( new Uint8Array(res.data) .reduce((data, byte) => data + String.fromCharCode(byte), '') ); return `data:${res.headers['content-type'].toLowerCase()};base64,${image}`; }) .catch( err => { return err; }); 이미지를 state에 저장하는등에 사용
라이브러리 yarn add worker-loader worker 관련 라이브러리 설치 worker-loader 파일 설정 custom.d.ts declare module "worker-loader!*" { class WebpackWorker extends Worker { constructor(); } export default WebpackWorker; } worker 파일 작성 TestWorker.js /* eslint-disable no-unused-vars */ /* eslint-disable no-restricted-globals */ const ctx: Worker = self as any; // Respond to message from parent thread ctx.addEventListe..
참조 : https://medium.com/@trustyoo86/react-redux%EC%9D%98-hooks%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-78f9b8aaa365 react-redux의 hooks를 사용하기 react에 대한 내용을 공부하면서, react-redux를 이용한 react 데모를 만들고 있었습니다. redux를 개인적으로는 좀 맘에 안들어했던 이유중 하나가, mapStateToProps 와 connect 라는 react-redux 에서… medium.com https://darrengwon.tistory.com/559 react-redux의 hook : useDispatch, useSelector react-redux 7버전 이후 부터 ..
미들웨어 액션객체로 디스패치가 발생하여 리듀서로 전달하는 중간과정부분 액션함수가 아니여도 디스패치할 수 있는 함수 액션객체 값을 변경하여 전달하거나, 액션객체를 무시하거나 등 처리가 가능 미들웨어 파라미터 store, action, next를 전달 받는데 이중 next를 실행하면 다음 미들웨어 없으면 리듀서에게 전달된다 next를 실행시키지않으면 액션 디스패치를 무시하게됨 thunk 특정 작업을 나중으로 미루기위해 함수로 감싸놓은 형태 redux-thunk 객체생성함수에서 객체가 아닌 함수를 리턴할수있도록 가능하게함 redux-thunk 미들웨어에서 액션이 함수로 전달되면 dispatch, getState를 넣어서 전달해줌 function incrementIfOdd() { return (dispatch,..
파일의 경로는 변경해도 무관 1. 리덕스 파일(src/modules/counter.js) 생성 후 액션 타입 생성 1 const INCREMENT = 'counter/INCREMENT'; cs 2. 액션타입에 맞는 액션 생성함수 생성 1 export const increment = () => ({ type: INCREMENT }); cs 3. 리덕스 파일에 리듀서 함수 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 export default function counter(state = initialState, action){ switch(action.type){ case CHANGE_COLOR: return { ...state, color: acti..