본문 바로가기

분류 전체보기

 (122)
React 성능 최적화 최적화를 하지 않으면 setState를 할 때마다 전체 렌더링이 일어난다. 어디어디 렌더링이 일어나는지 확인 하는 방법 : devTool의 reactComponent 탭에서 톱니바퀴 누르고, Highlight updates when components render에 체크!! 1) Hooks 에서 : memo import React, { memo } from 'react'; const Try = memo(( props ) => { ... }); export default Try; 2) Class 에서 : PureComponent, shouldComponenetUpdate ① PureComponent import React, { PureComponent } from 'react'; class Try exte..
React 컴포넌트 나누기 - main.jsx 설명 ) "tryInfo" 이름으로 객체 v를, "index" 이름으로 인덱스i를 자식컴포넌트인 try 에 넘겨준다. return( { result } 시도: { tries.length } {tries.map( (v, i) => { return ( ); })} ); - try.jsx 설명) "props" 라는 이름으로 부모컴포넌트에게 데이터를 받는다. props.tryInfo, props.index 를 받을 수 있다. import React, { memo } from 'react'; const Try = memo(( props ) => { // props 의 값은 자식이 변경하면 안된다. 부모가 바꾸어야함. *원칙임! // 실무에서는 바꿔야할경우가있는데, 이럴경우 props를 stat..
React if문 * render 함수의 return 안에는 jsx가 오고, jsx 안에서는 for와 if를 못쓴다. 따라서 * 삼항연산자를 사용하는 것이 제일 깔끔하다 return result.length === 0 ? null : 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms * 아니면 즉시 실행 함수를 통해서 { (() => { if(result.length === 0) { return null; }else{ return 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms 리셋 } })(); }
React 반복문 * 반복문 사용 방법 3가지 1) 2차원배열 생성, 2) 객체 생성, 3) 즉시실행 함수 1) 2차원 배열 생성 ... return ( {[ ['사과','Apple'], ['오렌지','Orange'], ['포도','Grape'], ['바나나','Banana'], ['체리','Cherry'] ].map( (v) => { return ( { v[0] } - { v[1] } ); })} ); 2) 객체 생성 ... return ( {this.state.tries.map( (v, i) => { // return () 은 생략 가능. key에는 i 넣으면 안된다.(성능최적화 문제) return ( // 컴포넌트 분리함!! ); })} ); // try.jsx import React, { memo } from 'r..
React - import, require, export 관계 * require 와 import 차이 - require 는 node 의 모듈 시스템이다. - import, export 는 React 거야 - [ module.exports ] 랑 호환되는게 [ exports default ] 임 - require 랑 import 랑 호환되는경우도 있다. - require = import(엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.) - moule.exports = exports default (엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.) - module.exports = { hello: 'a'}; >> es2015 문법 - exports hello = 'a'; >> commonJs 문법 - node 에서는 require 만 써야함. 그런..
error)Uncaught Error: Extension context invalidated. getURL('build/react_devtools_backend.js'); 에서 에러나고있다고함 >> 크롬확장프로그램에서 리액트 삭제했다가 재설치하니 되었다.
error ) Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. jsx 파일에에서 export 할 때 export default NumberBaseballClass; 이렇게 했으면 client.jsx 에서 import 할 때에도 import NumberBaseball from './NumberBaseballClass'; 이렇게 해야함!!! 반대 경우) export : module.exports = WordRelay; import : const WordRelay = require('./WordRelayHooks');
React webpack.config.js 작성 const path = require('path'); // node에서 경로 쉽게 조작하기 위한 것. node 깔려있으면 자동으로 path 가 깔려있다. const { webpack } = require('webpack'); const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 작성한대로 webpack이 싹 합쳐서 하나의 파일로 만들어 설정한 경로에 넣어준다. 합치기 명령어는 package.json 의 script 에 등록을 해주거나 명령어로 등록을 해줘야 동작함. 아니면 "npx webpack" 이라고 명령어 치면 실행 된다. module.exports = { name: 'word-relay-setting', mode..

티스토리툴바