react9 [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. [React.js] 'Class Component' Vs 'Functional Component' React Component에는 Class형과, Function형 두 가지가 존재한다. 두 컴포넌트를 코드를 이용해서 분석해보자. 1. Rendering JSX JSX란? JSX란 JavaScript XML의 약자로, JavaScript를 확장한 문법이다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 조직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 .. 2021. 3. 26. [React.js] Cross Domain 이슈 해결하기 동일 출처 정책(same-origin policy) 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용을 하는 것을 제한하는 중요한 보안 방식 동일한 출처 간의 호출만 허용 동일한 출처 : 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같은 경우 URL1 URL2 결과 이유 http://store.company.com/dir/page.html http://store.company.com/dir2/other.html O 경로만 다름 http://store.company.com/dir/inner/another.html O 경로만 다름 https://store.company.com/secure.html X 프로토콜 다름 http://store.company.com:81/.. 2021. 3. 15. [React]Chart 그리기(Recharts) React에서 차트를 그리기 위해서 Recharts라는 패키지를 사용한다. 검색해보면 다양한 차트 그리기 패키지가 있는데 그중 Recharts가 사용하기 난이도도 적당하고, UI가 마음에 들어서 사용해보기로 정했다. recharts/recharts Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub. github.com Installation 우선 React App Project로 가서 recharts 패키지를 설치한다. npm install recharts How To Use ★ 프로젝트 구조 src component Chart.j.. 2020. 11. 26. 이전 1 2 다음 반응형
