hoilzz.github.io/react/connect-state/ connect의 mapStateToProps는 언제 실행될까. 그리고 리렌더링은 언제 어떻게 발생하는가. react-redux와 connect https://react-redux.js.org/using-react-redux/connect-mapstate 를 번역한 글이다. Connect: mapStateToProps로 데이터 가져오기 는 스토어에서 데이터의 부분을 선택하여 사용한다. 즉, 연결된 컴포넌 hoilzz.github.io react.vlpt.us/redux/09-connect.html 9. connect 함수 · GitBook 9. connect 함수 소개 connect 함수는 컨테이너 컴포넌트를 만드는 또 다른 방법입니다. ..
액션 타입 상태를 변화시키는 액션의 타입을 지정 const INCREMENT = 'counter/INCREMENT'; 액션 객체 상태를 변화시키는 액션객체를 생성 type 값이 필수 { type: CHANGE_COLOR, color } 액션함수 액션객체를 만들기 위한 함수 export const changeColor = color => ({ type: CHANGE_COLOR, color }); 리듀서 상태를 변화시키는 함수 현재상태와 액션객체를 파라미터로 전달받음 리턴값으로 변경된 상태값을 전달 인풋값과 아웃풋은 항상 동일해야한다 export default function counter(state = initialState, action){ switch(action.type){ case CHANGE_CO..
버전의 의미 2.0.112 -> 메이저 : 엄청나게 큰 무언가가 변했을때 증가0 > 마이너 : 어떤 기능이 추가 되었을때 증가11 -> 패치 : 그냥 패치했을때 증가 ^(캐럿)의 의미 ^2.0.11^(캐럿): 마이너 버전이 변경되었을때 업데이트, 메이저 버전이 변경되었을떄는 업데이트 받지 않음ex) ^2.0.11 -> 2.13.11 (o), ^2.0.11 -> 3.0.11 (x)기본적으로 마이너 버전이 업데이트 되도 호환성에는 문제가 없으므로 괜찮지만가끔 호환이 되지않는 라이브러리도 존재하니 주의
./node_modules/react-sortablejs/dist/index.es.jsCannot find module: 'sortablejs'. Make sure this package is installed. 예를들어 위와 같은 에러 발생 시 대처 순서1. node_modules를 다 지우고 다시 받아 본다여기서 95%이상 해결됨2. 같은에러 재 발생 시 package.json을 오픈하여 해당 라이브러리에 ^(캐럿)이 붙어져 있는지 확인ex) "react-sortablejs": "^2.0.11"3. 해당 라이브러리 npm 홈페이지 방문 ex) https://www.npmjs.com/package/react-sortablejs/v/2.0.114. 홈페이지에서 version을 확인하여 최근 업데이트 된 ..
getSnapshotBeforeUpdate실제 DOM에 그려지기 직전에 호출되는 라이프사이클 함수 컴포넌트 최초진입시 setState가 사용되어서 렌더되는게 느린거같아위 라이프사이클 함수에다 해당 함수를 넣어서 실행 실제로 render되기전에 실행되니 화면에 나타날때 부자연스러운 부분이 없어서 좋음(화면에 나타나자마자 setState가 실행되면 다시 화면이 그려지니 부자연스러운 부분이있음) 예제1234567891011getSnapshotBeforeUpdate(nextProps, prevState){ //최초 진입시에만 동작하게 하기위함 if(prevState.test === 0){ this.test(); }}cs
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import { pdfjs } from 'react-pdf'; export class Test extends Component { viewerContainer = React.createRef(); viewer = React.createRef(); state = { numPages: null, pageNumber: 1, } async componentDidMount() { let container = this.viewerContainer.current; let viewer = this...
FileSaver, jsZip 설치 필요 npm install file-savernpm install jszip 파일 읽기let reader = new FileReader();reader.readAsText('읽을 파일 넣음');reader.onload = () => { // onload는 비동기니까 주의console.log( reader.result );} 파일 다운로드FileSaver.saveAs(file or new Blob([파일내용]), 파일명);ex) FileSaver.saveAs(new Blob([res]), file.originalFileName + "." + file.fileExtsn.toLowerCase());FileSaver.saveAs(file, file.fileName); 파일 압..