react+vue
-
[react] Too many re-renders. React limits the number of renders to prevent an infinite loop.react+vue 2022. 9. 22. 14:50
react 실습을 하던 중 잘 따라하고 있다고 생각했는데 위의 에러 메세지를 만났다. 문제 코드 function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return 문자 변경 { setList([...list,10]); }}>리스트값 추가 {list.map(i => ({ i}))} { str}:{getAddResult()} ..
-
[javascript] import/export 방법react+vue 2022. 9. 21. 14:28
Sub.js를 import할 경우 Sub.js export default Sub; ⇒ Sub함수를 외부에 노출시킨다. 외부에서 Sub.js를 사용할 경우 import 함수이름 from 파일 경로로 사용한다. 또는 으로 작성하면 자동 import된다. import시 중괄호 {} 사용하는 경우 default 외에 다른 값 또는 함수를 export 시키는 경우 사용한다. Sub.js의 예시 default인 Sub 함수 외에 num 변수를 export시키기 위해 export {num};으로 작성하였다. import import {변수} from ‘경로’; 로 import할 수 있다. 사용시 {변수}로 가져와 사용한다. 앞의 예시에서는 div태그가 없었지만 return값은 하나의 태그만 가능하기 때문에 Sub태그..
-
[react] useEffectreact+vue 2022. 9. 21. 14:22
hooks라이브러리의 useEffect UI가 최초 로드될 때 혹은 의존 상태 변수가 변경될 때 실행되는 함수다. useEffect function App() { return ( {data} { setData(data+1)}}>더하기 ); } export default App; 더하기 버튼을 누를 때마다 data가 1씩 증가한다. function App() { //실행시점: //1.App()함수가 최초 실행될 때(마운트될 때) //2.상태 변수가 변경될 때 const download = () => { let downloadData = 5;//가정 setData(downloadData); }; const [data, setData] = useState(0); useEffect(() => { console...
-
[react] useStatereact+vue 2022. 9. 21. 14:20
버튼을 누르면 변수가 1씩 증가하는 화면을 구현해보자 아래의 코드는 변수는 1씩 증가하지만 화면에 반영되지 않는다. function App(){ let number = 1;//상태 값이 아니라 그냥 변수 const add = ()=>{ number++; console.log('add',number); }; //랜더링 시점 = 상태 값 변경 return( 숫자:{number} 더하기 ); } number가 상태 변수가 아닌 그냥 변수이기때문에 UI가 변경되지 않는다. react는 상태 변수의 변화는 감지하지만 일반 변수의 변화는 감지하지 않는다. hooks라이브러리의 useState function App(){ //let number = 1; const [number,setNumber] = useState..
-
javascript 배열 함수 (concat, filter, map, slice, spread)react+vue 2022. 9. 21. 14:11
리액트에서 배열을 다루는 것 리액트에서는 UI의 각 요소를 컴포넌트화 하여 화면을 만든다. 컴포넌트화 한 화면의 요소를 배열에 저장하여 배열을 가공하는 것이 중요하다. 아래에서 배열을 가공할 수 있는 함수와 전개 연산자의 활용법을 작성하겠다. 배열 const a = [1,2,3]; concat 새로운 배열을 만들어서 추가하기 const a = [1,2,3]; const b = a.concat(4); console.log(a);//[1,2,3] console.log(b);//[1,2,3,4] const c = [...a,4];//concat과 같다 filter 걸러내기 bool을 return 받고, true만 걸러낸다. 보통 배열의 요소를 삭제할 때 쓴다. const a = [1,2,3]; const b ..
-
react 개념react+vue 2022. 9. 20. 16:43
리액트 개념 데이터 변경을 감지하여 UI를 자동으로 변경해주는 엔진 daemon 데이터 변경 감지를 위한 프로세스 항상 돌아가야 한다. → 서버가 필요(node.js) npm 라이브러리 설치 및 빌드 도구 자바로 치면 maven npmjs.com -라이브러리 모음 node.js 리액트를 실행하기위한 서버 npx 라이브러리 설치 및 빌드 도구 npx는 글로벌 라이브러리를 재사용한다.npm은 프로젝트와 글로벌로 나누어 관리한다. 라이브러리의 새 버전을 설치할 때 구 버전을 삭제해 주어야 한다. 또한 라이브러리 실행 후 삭제도 자동으로 지원한다. 실행과정 package.json react-scripts start → index.js를 실행시킨다. index.js render 함수 index.js의 App함수의..
-
react 설치react+vue 2022. 9. 20. 16:40
설치할 항목 node.js react visual studio : 이미 설치되어 있어 설명은 생략하겠다. visual studio 마켓 prettier eslint node.js 설치하기 https://nodejs.org/ko/download/ 위 주소에서 LTS버전을 다운받으면 된다. VScode 세팅 파일 탐색기를 열어 workspace를 만들어준다.나는 reactWork라는 이름의 폴더를 생성했다. 나는 reactWork라는 이름의 폴더를 생성했다. VSCode 세팅하기 좌측 상단의 파일을 클릭 폴더열기에서 만들어둔 workspace를 열어준다 terminal 열기 workspace를 우클릭하여 통합 터미널 열기를 클릭해준다. terminal에서 node.js가 설치 되었는지 확인한다. node -..