react error3 [React.js] Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. at tr at table at div at div at Information (http://localhost:3000/main.f8aa81041ea5266af521.hot-update.js:33:3) at div at App (http://localhost:3000/static/js/main.chunk.js:171:94) console. 브라우저에는 태그가 필요하다. 코드에 없으면 브라우저에서 자동으로 삽입하는데, 이 것은 첫 번째 랜더링에서는 잘 동작하지만 테이.. 2021. 10. 13. [React.js] Error : React Hook "useState" is called in a function "customPage" which is neither a React function or a custom React Hook function React Hook을 사용한다면, 함수형 컴포넌트가 반드시 대문자로 시작해야 한다. 해당 에러는 함수형 컴포넌트를 customPage과 같이 소문자로 시작하는 이름으로 지정해서 생기는 에러이다. Hook은 JavaScript 함수이지만 사용할 때 두 가지 규칙을 따라야 한다. 최상위 수준에서만 Hook 호출 루프, 조건 또는 중첩 함수 내에서 Hook를 호출하지 않는다. 대신, 조기 반환 전에 항상 React 함수의 최상위 수준에서 Hooks를 사용하라. 이 규칙을 따르면 구성 요소가 렌더링될 때마다 후크가 동일한 순서로 호출된다. 이것이 React가 다중 호출 useState과 useEffect 호출 사이의 Hook 상태를 올바르게 보존할 수 있게 해준다. React Functions에서만 Hook 호.. 2021. 9. 27. [React.js] Array.map() 사용 시 unique "key" props Error import React from 'react'; const App = () => { const numbers = [1,2,3,4,5]; const numberList = numbers.map(number => {number}); return {numberList}; } export default App; 해당 코드를 실행하면, 아래와 같은 에러가 발생한다. Warning : Each child in a list should have a unique "key" prop. "key" prop이 없다는 경고 메시지인데, key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면, 변화를 더욱 빠르게 감지할 수 있다. key값은 언제나 유.. 2021. 5. 7. 이전 1 다음 반응형
