본문 바로가기

React.js18

[React & Spring] 8강 - useMemo 8강 – useMemo(기억)import React, { useState, useEffect } from 'react'; const 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); return sum; } return ( {setStr("안녕");}}>문자 변경 {setList([...list, 10]);}}>리스트값 추가 {list.map(i => {i})} {str}: {getAddR.. 2023. 3. 17.
[React & Spring] 4강 - useEffect import React from 'react'; let num = 10; const Sub = () => { return ( ); }; export {num}; export default Sub; export {num}; num을 외부로 export할 수 있음 -> {중괄호} import React from 'react'; import Third from './aa/Third'; import Sub from './Sub'; import { num } from './Sub'; const App = () => { return ( {num} ); }; export default App; const App = () => { useEffect(); return ( ); }; export default App; u.. 2023. 3. 16.
[React & Spring] 3강 - 배열 관련 (concat, filter, map, slice, spread) 배열 관련 - concat, filter, map, slice, 스프레드(전개) 연산자 spread 연산자(얕은 복사) -> 스프레드는 복사할 때 사용 console.log("2.===============추가하기"); const a2=[1,2,3]; const b2 = a2.concat(4); console.log(`a2의 값은: ${a2}`); // 1,2,3 console.log(`b2의 값은: ${b2}`); // 1,2,3,4 push vs concat(불변) a2.push(4); // a2의 값이 1,2,3,4 a2.concat(4); // a2의 값은 그대로 1,2,3 concat은 a2의 값을 변하게 하는게 아님 -> concat은 추가할 때 filter: 걸러내기 a3.filter(): .. 2023. 3. 15.
[React & Spring] 2강 - 실행흐름 이해하기 1. 실행과정 package.json -> index.js 실행 index.js에서 ReactDOM.render(): 그려줌 const root = ReactDOM.createRoot(document.getElementById('root')); -> document.getElementById(‘root’): 어디에 그릴건지 대상 public의 index.html에서 root를 찾는다 App.js의 요소를 넣어줌 npm start했을 때 결국 열리는 파일은 index.html 2. JSX 문법 () var a = 10; var b = “안녕”; return ( 안녕 ); 이걸 가능하게 해주는게 JSX 문법 JSX: html 코드를 javascript에 쓰게 해주는 문법 리액트에서 페이지를 이동한다는 개념 .. 2023. 3. 15.

티스토리툴바