리액트 컴포넌트에서 받은 숫자값을 CSS 변수로 지정하고 싶은데, style={{'--box-gap': `${gap}`px}​ 이렇게 넣으니, Warning이 떴다. 해결책은 as React.CSSProperties를 넣어주면 된다. style={{'--box-gap': `${gap}`px} as React.CSSProperties}

Error React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? ✅ function component은 본문의 최상위 수준에서 호출하세요 . ✅ custom Hook은 본문의 최상위 수준에서 호출하세요 . ❌ 조건이나 루프 내에서 Hook을 호출하지 마세요. ❌ 조건문 다음에 Hooks를 호출하지 마세요 return. ❌ 이벤트 핸들러에서 Hooks를 호출하지 마세요. ❌ 클래스 구성 요소에서 Hooks를 호출하지 마세요. ❌ ..

History 뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다. 위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다. 이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ Problem .... Solution 리액트는 label for 대신에 htmlFor 를 사용한다. checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다. 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. ....