본문 바로가기

frontend (React) 개발17

(React) 무한 렌더링 원인과 방지 const [count, setCount] = useState(0);const handlecart= (item) => {          setCount(count+1);          setItem(item);}무한 렌더링을 유발하는 코드handlecart(item)}>cart 위의 코드는 handlecart 함수의 참조를 패스하는게 아니라 함수 자체를 호출하고 있다. 따라서 인위적으로 클릭하기 전에 인터프리터가 코드를 파스할 시에 함수를 실행하게 된다. 이로인해 함수내에서 스테이트는 업데이트되고 화면은 다시 렌더링하게 되서 무한 루프에 빠지게 된다.   따라서 해결책은 함수의 참조를 설정하는 것이다.() => handlecart(product)}>cart 2024. 5. 7.
(React) Routing 페이지 이동 필요한 패키지 인스톨npm install react-router-dom@6 index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(                       ); App.jspath를 정의하고 Component(element)를 연결시킨다.import { Routes, Route } from 'react-router-dom'; .. 2024. 1. 5.
(React) const, var, let keyword scope const 전체 var 와 같으나 한번 값이 할당되면 바꾸지 못함 var function 내 서브블럭내에서 다시 같은 이름의 변수를 할당하여도 똑같은 변수를 가르킨다. let 블럭( { } ) 내 블럭내에 선언하면 블럭을 빠져나오면 사라짐 // case 1 function varScoping() { var x = 1; if (true) { var x = 2; console.log(x); // will print 2 } console.log(x); // will print 2 } // case 2 function letScoping() { let x = 1; if (true) { let x = 2; console.log(x); // will print 2 } console.log(.. 2023. 12. 1.
(React) map map array(list, dictionary) 를 조작하여 새로운 array 를 리턴 const fibonacciNumbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] const doubledFibonacciNumbers = fibonacciNumbers.map(number => number * 2) // [0, 2, 2, 4, 6, 10, 16, 26, 42, 68] const users = [ { name: "Park", age: 51, height: "1.90cm" }, { name: "Lee", age: 22, height: "1.67cm" }, { name: "Choi", age: 47, height: "1.59cm" } ] const userNames = users... 2023. 12. 1.

티스토리툴바