react.js6 [React.js] Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option> Warning Message Warning: Use the 'defaultValue' or 'value' props on instead of setting 'selected' on Warning Message가 발생하는 이유 일반적인 HTML에서 에 기본값을 설정하는 방법은 option 요소 중 하나에 selected 속성을 추가하는 것이다. 하지만 React에서는 다음과 같이 option 태그에 selected를 사용하면 경고가 발생한다. First Second Third 해결방법 select 태그에 defaultValue를 사용해 기본값을 설정할 수 있다. First Second Third 2021. 11. 26. [React.js] Warning: The href attribute is required for an anchor to be keyboard accessible... Warning Message Line 82:31: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/.. 2021. 11. 25. [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] 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. 이전 1 다음 반응형
