react17 [error] cannot update a component ('a') while rendering a different component ('b') 요건 정확히는 warning 이지만 eslint 사용자에게는 뭐 에러나 마찬가지다... 해결해야만 한다 해결도 해결이지만 왜 이 경고가 떴는지를 꼭 알고 넘어가자 에러 원인 하나의 상태에 여러 컴포넌트가 동시에 접근하여 상태가 꼬일수 있으니 해당 두 컴포넌트의 동시 랜더링은 안됩니다! 랜더링 후에 상태를 조작하여 조작한 상태를 바탕으로 랜더링이 되도록 상태 조작은 랜더링 이후로 미뤄주세요! 하나의 상태를 공유하는 두 컴포넌트가 랜더링 될 때, 한 컴포넌트에서 상태 변경이 일어나면 변경된 상태를 가지고 다른 컴포넌트도 동시에 랜더링 할 수 없으므로, 되도록 랜더링이 끝난 다음에 문제의 상태를 조작해서 다른 컴포넌트가 다음 순서로 랜더링 되도록 해주라는 warning 이다. - 내멋대로 이해입니당! 해결 방.. 2022. 12. 4. [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. 이전 1 2 3 4 5 다음
