FrontEnd/React9 Material UI Table 사용시 유의사항 문제상황 회사에서 AgGrid와 CustomFooter 컴포넌트를 이용하여 Pagination 기능을 구현하고 있던 와중에 기능은 문제없이 잘 동작하는데, 개발자도구(F12)에 다음과 같은 Warning 메시지가 출력되는 것을 확인하였다. 기능 구현에는 문제가 전혀 없었지만 개발자에게 빨간 경고문은 절대로 넘길 수 없는 직업병 같은 것이 있기 때문에 해당 경고를 잡고자 한다. 개발자 도구 콘솔창 경고문 경고문 내용은 다음과 같다. Waring: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 이 경고는 React에서 유효한 HT.. 2023. 5. 26. props란? 다음 코드를 실행해보자 import { useState } from 'react'; export default function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ); } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 위 코드는 Modal 컴포넌트를 App 컴포넌트 안에 삽입하는 코드이며(이 경우, App 컴포넌트를 부모 컴포넌트, Modal 컴포넌트를 자식 컴포넌트라고 한다), 예상대로라면, 글제목[0] 부분에 '남자코트 추천'이 떠야한다. 하지만 이 코드를 실행 시켜보면 예상과는 다르게 에러가 뜬다. 에러 내용을 보자 에러를 보면 위와 같이 "글제목"이 .. 2023. 5. 26. Component란? Component란 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다. 이걸 이용하면 함수와 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다. 다음은 모달창을 컴포넌트화 해서 html에 꽂아넣는 예시이다. function App (){ return ( // Modal 컴포넌트가 들어갈 곳 ) } // Modal 컴포넌트의 구조 function Modal(){ return ( 제목 날짜 상세내용 ) } 컴포넌트 만드는 법 1. function을 이용해서 함수를 하나 만들어주고 작명한다. 2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다. 3. 그럼 원하는 곳에서 혹은 사용하면 아까 .. 2023. 5. 26. state의 정의 및 사용방법 리액트에서의 state 정의 및 사용방법 일반 자바스크립트에서는 데이터를 저장하기 위해 let 변수이름 = '데이터'; 라는 식으로 변수에 데이터를 저장했었다. 하지만 리액트에서는 보통 변수 말고, state를 만들어서 데이터를 저장한다. 데이터의 값이 잘변 하지 않는 값은 변수에 저장하거나 하드 코딩해도 되지만, 값이 자주 바뀔거 같으면 state에 값을 저장하는 것이 좋다.(그냥 웬만하면 state 쓰는 것이 좋다) 이는 리액트의 동작 방식 등과 관련이 있는데 해당 내용은 추후에 다루도록 하겠다. 일단 state의 사용방법은 다음과 같다. import { useState } from 'react'; import './App.css' function App(){ let [shirts, setShirts.. 2023. 5. 26. 이전 1 2 3 다음 728x90
