React (29) 썸네일형 리스트형 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.. React - require / import 차이 require는 node의 모듈 시스템. 리액트 하는 내 과정에서는 rquire = import 라고 봐도 문제 없으며 둘이 호환된다고 생각해도 된다. node 로 돌리고있고, node에서는 require만 되는데, import 를 써도 현재 에러 안나고있는 이유는 babel이 바꿔주고있기때문. webpack.config.js 는 node에서 돌리기때문에 import 쓰면 안된다. (1)const React = require('react'); 이렇게쓰는거랑, (2)const { hot } = require('react-hot-loader/root'); 이렇게쓰는거 차이점은? (1) : export default WordRelay; 와 같이 default 로 export 한 것. (2) : export c.. webPack 으로 React 프로젝트 생성, webPack 설정 * 웹팩 - 실제 개발시에 중복도 없애주고, console.log 같은것도 없앨 수 있음. - 수만개의 컴포넌트들을 합쳐서 한 파일로 만들어준다 - node를 알아야함(node = javascript 실행기) * 프로젝트 생성 1. 폴더 생성 후, 터미널에서 생성한 폴더로 들어가기 2. init하기 npm init package name 정하고, author 에 이름 적고, license 에는 MIT 라고 적음. (MIT가 뭘까) >>> 상업적으로 수정/배포 해도되지만 피해는 사용자가 감수하는 라이센스래 3. react-dom, cli 설치 npm i -D react react-dom npm i -D webpack webpack-cli 설치하면 package.json에 출력됨. -D 는 개발용이라는 뜻임.. 시작 > React 사용이유 / setState 주의점 * React 사용 이유 - Single Page Application : 깜빡임X, UI/UX 좋음. 앱과 비슷한 느낌 - 재사용 컴포넌트 - 데이터와 화면 일치 * 코딩시 주의점 - setState는 비동기임 - setState할 때 마다 render되기때문에 함수는 리턴밖에서 선언할것 이전 1 2 3 4 다음