개발/리액트 5

react. too many re-renders. react limits the number of renders to prevent an infinite loop

문제상황 : too many re-renders. react limits the number of renders to prevent an infinite loop 발생 const nextPlease = () => setBack(false); setVisible((prev) => ( prev === 10 ? 10 : prev + 1 ) ); const previousPlease = () => setBack(true); setVisible((prev) => ( prev === 1 ? 1 : prev = 1 ) ); 해결 : 해결방법은 단순했다. 괄호가 안 닫힌 것이 이슈였다. nextPlease와 previousPlease를 모두 {}로 닫아주니 해결되었다. const nextPlease = () => { ..

개발/리액트 2023.08.17

react. state가 immutable해야 하는 이유

🔱 수업 https://nomadcoders.co/react-masterclass/lobby 을 듣다가 6.14, 6.15장 immutability part 를 듣다가 아래 slice 통해서 값을 교체하는 방식으로 진행하는 것을 보고 왜 state가 immutable 해야 하는지 찾아보았다. setToDos((oldTodos) => { const targetIndex = oldTodos.findIndex(toDo => toDo.id === id); const oldTodo = oldTodos[targetIndex]; const newTodo = {text, id, category: name as any}; return [ ...oldTodos.slice(0, targetIndex), newTodo, ....

개발/리액트 2023.08.15

pseudo class | 개념 및 &:hover 통해서 구현

pseudo class - 요소의 상태에 따라 선택하여 꾸며주는 것을 의미 LESS 전처리기에서, & 통해서 부모 element 접근할 수 있다. (react에서도 동일하게 사용 가능) const Box = styled.div` height: 200px; width: 200px; background-color: tomato; display: flex; justify-content: center; align-items:center; animation: ${rotationAnimation} 1s linear infinite; span { font-size: 36px; &:hover { // span:hover 와 동일 font-size: 100px; } } `; 가상 선택자(가상 클래스) 설명 :hover ..

개발/리액트 2023.08.10

typescript. ??(nullish-coalescing) unexpected token, you may need an appropriate loader to handle this file type

문제 상황 > - npm start 시 unexpected token 발생 - 노마드코더 강의 듣는 중 발생 https://nomadcoders.co/react-masterclass /src/Circle.tsx 21:30 Module parse failed: Unexpected token (21:30) You may need an appropriate loader to handle this file type. | return /*#__PURE__*/React.createElement(Container, { | bgColor: bgColor, > borderColor: borderColor ?? bgColor, | __self: this, | __source: { 해결 > - react 버전 18 -> 1..

개발/리액트 2023.08.06

jest-worker run build : unexpected token

문제 상황 > - create react app 통해서 설치 후 실행했을때 에러 발생 - 노마드코더 강의 듣는 중 발생 https://nomadcoders.co/react-masterclass /MovieDB/node_modules/jest-worker/build/WorkerPool.js:25 } catch { ^ SyntaxError: Unexpected token { at NativeCompileCache._moduleCompile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:240:18) at Module._compile (/home/donquixote/Des..

개발/리액트 2023.08.03
반응형