전체 글337 [error] Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 랜더링 할때마다 상태가 변해서 무한 랜더링이 일어나는 에러 에러 원인 특정 이벤트 발생 시, 상태 조작이 아니라, 그냥 매 랜더링마다 상태 조작이 일어나고 있다는 에러다 onClick 등에 콜백으로 상태 조작을 걸지 않고 바로 상태 조작 함수를 넣었거나, 이벤트와 상관없이 매 랜더링마다 항상 참인 조건으로 상태 조작 함수를 넣어서 매 랜더링 마다 상태 조작으로 인해 랜더링 되어 랜더링 무한루프에 빠진 것이다 해결 방법 onClick 에 상태 조작 함수가 콜백 함수로 제대로 들어갔는지 확인, 항상 true 가 성립하는 조건에서 상태 조작 함수를 넣었는지 확인 특정 조건, 특정 이벤트에서만 상태 조작 조건문이 동작하도록 수정하자 2022. 12. 4. [React] Automatic Batching automatic 자동 + batching 묶기 = (랜더링 전 state 변경 사항을) 자동으로 묶어주는 기능! 위의 이름의 정의대로의 기능을 가진 react 18 의 새 기능이다 이전부터 궁금한게 있었다 아래와 같은 구문에서 setA((a) => a+1) setB((b) => b+1) 상태가 변경되면 새로 랜더링 되는건 알고 있었는데 상태 변경 코드 라인에서 바로 새로 랜더링 되는지, 아니면 일단 상태 변경 사항을 모아뒀다가 구문 종료 후에 모아둔 변경 사항을 읽어서 새로 랜더링 하는지, 랜더링 시점을 확실하게 알지 못했었다 물론 위의 코드는 a 뿐 아니라 b 의 상태도 바꿀것이라고 알았지만, a의 상태 변경이 감지되면 바로 랜더링 된다면 실제로는 b 변경까지 코드가 실행 못하지 않나? 마치 retu.. 2022. 12. 3. [error] ~ is missing in props validation react 에서 하위 컴포넌트에 props 를 이용해서 데이터를 전달하려던 중, 그-컴포넌트 is missing in props validation 해당 컴포넌트 파일에서 해당 props 를 사용하는 부분에서 모두 위와 같은 에러가 떴었다 에러 원인 props 의 타입 검증이 필요하다는 의미이다 eslint 를 사용할 때에 나오며, 오류를 막기 위해 props의 더 정확한 타입을 요구하는 것이다 해결방법 yarn add prop-types 로 라이브러리를 설치 후, props 를 받는 해당 컴포넌트 정의 파일 내에서, import PropTypes from 'prop-types' 임포트 해 온 후, 해당 컴포넌트와 같은 최상위 레벨에서(=컴포넌트 밖에서) 아래와 같이 props 타입을 정의해주면 된다 대.. 2022. 11. 30. classnames 사용법 classnames 모듈은 html요소에서 클래스를 조건부로 넣거나 빼줄때 따로 조건문 필요없이 쉽게 작성하게 해주는 라이브러리다 만약 내가 돈이 있을때만 'can-buy' 라는 클래스명을 추가하고, 돈이 없을때는 클래스를 빼고 싶다면 아래와 같이 조건문을 사용해서 클래스를 추가하는 방법을 사용할 수 있지만 export default Tok = () => { let hasMoney = true; const myClasses = [sleepy, hungry]; if (hasMoney) { myClass.push('can-buy'); } return ( Hello Tokkissi ) } classnames 라이브러리를 사용하면 자바스크립트 조건문을 사용하지 않고도 같은 의미를 말할수 있다. 아래와 같이 사용.. 2022. 11. 26. 이전 1 ··· 4 5 6 7 8 9 10 ··· 85 다음
