리액트 (44) 썸네일형 리스트형 [리액트 에러] react-dom.development.js:16317 Uncaught Error: Too many re-renders. Re 문제의 에러 react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 문제의 코드 const MoviesCard = () => { const [alert, setAlert] = useState(""); const navigate = useNavigate(); const searchDate = useSelector((state: SearchDateType) => { const results = state.sortBySearch.data.results; // results가 undefined가 아닐 때 results.length <.. [react] 리액트에서 가상돔 - 본인이 이해한 리액트의 가상돔에 대한 정리입니다. - 리액트는 실제 DOM과 완전히 똑같은 2개의 가상돔을 생성한다. 리액트는 가상돔(Virtual DOM)이라는 것을 적용했다. 웹 개발에서 DOM(Document Object Model)의 변경을 관찰하고 최적화하는 기술을 가상돔(Virtual DOM) 이라 한다. 가상돔은 자바스크립트에서 DOM(Document Object Model)과 완전히 똑같은 복사체이다. 리액트는 실제 DOM과 완전히 똑같은 복사체인 가상돔을 두 개 생성하는데, 하나는 렌더링 이전의 가상돔, 다른 하나는 렌더링 이후의 가상돔이다. 즉, 변동사항을 반영할 가상돔과 읽기 전용인 가상돔을 생성한다. 리액트는 두 가상 돔을 비교해서 변동사항만 실제 DOM 에 반영한다. 리액트는 .. [리액트 타입에러-해결중] Property 'review' does not exist on type 'string | number'. Property 'review' does not exist on type 'string' 에러 메시지 전문 도대체 뭐가 문제여?! 이거 예전에 뜬 적 있던 타입에러 인데, 또 같은 에러가 뜬다. 예전에는 useState의 타입을 그냥 any[ ] 타입으로 지정하고 넘어 갔는데, 나중에 프로젝트가 커지니까 예상치 못한 곳에서 에러가 뜨길래 디버깅을 거슬러 올라가니 any[ ] 으로 지정한 부분이 문제가 되었다.. 그래서 이번에는 이것을 미리 사전에 차단하고 넘어가려고 하는데, 아직도 도대체 뭐가 문제인지 모르겠다. 에러 메시지를 해석 해보면 (string | number) [ ] 타입의 배열에서 review 라는 프로퍼티(속성)이 존재하지 않는다는 타입 에러인데,, 이건 무슨 장식인가? 타입 에러를 떠나서 잘만 존재하는 데이터인데, 타입 에러가 뜬다. 위 데이터가 존재하지 않는다. 무슨 사람 .. [react] 리액트 환경에서 <input type =range> 사용 시 Uncaught TypeError: Cannot read properties of null (reading 'value') 가 뜬다면 아래와 같이 range의 속성값을 useState 에 저장하여 , 버튼을 조작하려는 상황에서 const [rangeVal,setRangeVal] = useState('') return ( { console.log(e.currentTarget.value); setRangeVal((rangeVal) => {return rangeVal = e.currentTarget.value}); }}> ) 에러와 함께, 백지와 같은 페이지를 만나게 된다면 sortbyDate.tsx:22 Uncaught TypeError: Cannot read properties of null (reading 'value') 다음과 같이 click 이벤트를 실행할 함수를 외부에 정의하면 에러가 해결된다. onClick 의 콜백함수 내에서 .. [react] 드래그로 캐러셀 움직이는 법 보호되어 있는 글입니다. [react ] 리액트- 타입에서 img의 onError 에 대체 이미지를 넣으려면 "event: SyntheticEvent<HTMLImageElement> " 하면 된다. 간단 정리 자바스크립트에서 사용되는 이벤트 핸들러인 onclick 이나 onchange 등과 같은 이벤트 핸들러는 브라우저 마다 이벤트의 구현이나 동작들이 다를 수 있다. 하지만 리액트에서는 모든 브라우저에서 공통되게 이벤트 핸들러가 작동할 수 있도록 감싸주는 래퍼 객체가 존재한다. 래퍼 객체의 예시로는 onClick 같은 경우에는 MouseEvent 가 있고, onChange 는 ChangeEvent 가 그것이다. 다시돌아 와서 img의 이벤트는 앞서 MouseEvent 와 같이 일치하는 이벤트 래퍼 객체가 없기 때문에, 모든 이벤트 래퍼 객체의 시작이라고 할 수 있는 최상위 래퍼 객체인 SyntheticEvent 를 사용하여 정의한다. 따라서 이러한 이유에 따라 다음과 같이 img 의 이벤트 타입을 .. [react] 리액트에서 select 의 option 의 값( value) 가져오려면 selected가 아닌 onChange를 써서 value 값을 가져오자 자바스크립트만 쓸 때는 select 의 옵션 값은 selected 를 써서 가져왔는데, 오늘 리액트에서 이거와 똑같이 하려고 하니까 아래 에러가 떳다. 검색해보니 리액트에서는 위의 기능을 지원해주지 않아서 그런거라 하더라. 리액트에서는 옵션 값을 가져 오기 위해서는 select 태그에서 onChange 를 적용한 후 event.target.value 를 통해 선택된 해당 값을 가져올 수 있다. 뭐가 어찌되었든 복잡하지 않아서 다행이다. const [selectVal,setSelectVal] = useState(''); const changeSelectValue = (event) =>{ setSelectVal(event.target.value) }; return ( {optionText.map((text,.. [react-error] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 요약 " input 태그는 void 요소인 태그라서 ~ 사이에 빈공간, 자식요소(ex. 텍스트, 기타 태그 등)가 있으면 에러를 발생 시킨다." 에러명 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 파파고좌의 해석) Uncatched Error: 입력은 void 요소 태그이며 'childreness'를 포함하거나 'dangerouslySetInner'를 사용해서는 안 됩니다. 잠깐 정리) void: 아무것도 없음, 비어있음 dangerouslySetInnerHTML: react에서는 자바스크립트 자체에서 사용하는 innerHTML 을 사용할 수 없기 때.. 이전 1 2 3 4 5 6 다음
