리액트 (48) 썸네일형 리스트형 [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 을 사용할 수 없기 때.. [React-error] React Hook useCallback has a missing dependency: 'searchParams'. Either include it or remove the dependency array 보호되어 있는 글입니다. [React] PropTypes "부모와 자식 컴포넌트 사이에 불일치하는 데이터타입 검사" 개인참고용 1. 사용목적 부모로부터 전달받은 prop의 데이터 type을 검사하여 데이터 타입 불일치로 인한 예상치 못한 문제를 사전에 방지함 타입스크립트를 설치하여 사용하는 경우에는 필요 없음. 자바스크립트만으로 개발해야 하는 환경에서 필수적임. 불일치 하는 경우 다음과 같이 콘솔창에 경고를 출력함. 2. 셋팅방법? [터미널] - [npm i prop-types] 입력 및 설치 import PropTypes from ‘prop-types’ 컴포넌트명.propTypes = { prop: PropTypes . 타입 . prop의 필수 여부 판단* } * isRequired : 타입 설정을 필수로 ( 이를 지정하면, prop은 무조건 해당하는 타입을 가져야만 한다.) -> 지정하지 않으면 경고만 한다. 주의.. [React.Hook] 1. useState 개인 공부용 useState : 임시로 값을 저장하여 활용하기 위한 함수 1. 형식 let [state 명, state 변경함수 ] = useState(state 변수의 초기 할당 값) state명과 state 변경함수 부분은 자유롭게 작명하면 됨. 하지만 둘 간의 연관성을 명확히 하기 위해 state 라고 변수를 적으면, 함수에는 setState 라고 적는게 일반적임 2. 설명 let [state, setState] = useState(0) 가 주어졌을 때, useState(0)은 state의 초기값으로 0을 지정한다는 의미 즉, 예시의 state = 0 setState 는 함수로 state의 값을 수정하는 함수임. 예를 들어, setState(5) 로 설정하면, state = 5가 됨 니꼬 선생님에 .. react-dom.development.js:86 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 결론부터 말하면 for속성은 자바스크립트 문법이니, Minutes 리액트 jsx 문법에 맞게 htmlFor 속성을 써라는 말이었다. Minutes { temp = e.target.value }} type="number"> input 에 이름을 붙인다고 label 를 사용했는데, label 의 속성으로 for 을 사용하니 다음 에러가 뜨더라. 영어는 사절이므로 파파고에 돌렸더니 저런 의미였다. (뭐가 문제 인지 어떻게 써야하는지도 말해주는 리액트 개발자 분들의 친절함에 찬사를 보낸다.) " 경고: 'for'에 대한 DOM 속성이 잘못되었습니다. htmlFor를 말하는 건가요? " (넵! 그거 맞는 것 같아요! 정말 친절하시군요) 그래서 for 부분을 htmlFor 로 바꿔 주니 해결이 되었다. 잘 됐구나~.. 이전 1 ··· 3 4 5 6 다음
