728x90 react4 [ReactJS] 에러 "ReactDOM.render is no longer supported in React 18" React v18부터는 더이상 ReactDOM.render을 사용해 랜더링을 할 수 없습니다. // React v18 이전 const root = document.getElementById("app"); ReactDOM.render(, root); 위와 같이 사용했던 코드는 아래와 같이 변경해 사용할 수 있습니다. // React v18 const container = document.getElementById('app'); const root = createRoot(container); root.render(); 2022. 8. 7. "생활코딩 | React 2022년 개정판" 을 공부하며.. 3탄 대부분의 애플리케이션에는 CREATE | READ | UPDATE | DELETE 에 의해 동작되고 지금까지 READ 에 대해서 알아봤다면 이번에는 CREATE, UPDATE, DELETE 에 대한 부분이다. CREATE function App() { // .. 생략 .. return ( { setMode('WELCOM'); }}> { setMode('READ'); setId(_id); }}> {content} { event.preventDefault(); setMode('CREATE'); }}>Create ); } 먼저 create 라는 링크를 App 컴포넌트에 추가 한다. 링크를 클릭했을 때 모드가 바뀔 수 있도록 setMode 로 상태도 변경시킨다. 이제 추가한 링크를 클릭해보면 아무것도 출력되지 .. 2022. 4. 4. "생활코딩 | React 2022년 개정판" 을 공부하며.. 2탄 컴포넌트 만들기 만약 1억줄의 복잡한 Html 태그가 존재한다고 가정하면 그것을 정리하고 싶어질 것이다. 이 정리의 핵심은 연관된 것들을 그룹핑 해서 이름을 붙이는 것이고 앞으로 그 이름만 기억하면 됩니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Web Html Css Javascript Welcome Hello React! ); } export default App; html 코드를 복잡한 코드로 가정해 보았을 때 연관 있는 것끼리 그룹핑하여 사용자 정의 태그를 만들어 봅니다. .. 생략 .. function Header() { return Web } function App() { return ( Html.. 2022. 3. 27. "생활코딩 | React 2022년 개정판" 을 공부하며.. 1탄 React 란? 1. 서로 연관된 코드들을 그룹핑하고 이름을 붙여 단순한 태그로 만들고 2. 복잡한 코드는 숨기고 사용자가 만든 태그를 사용할 수 있는 환상적인 도구 만드는 방법은 class(클래스) vs function(함수) 가 있으며 최근 동향에 맞게 함수형 채택했다. 실습환경 구축 먼저, 실습할 수 있는 방법으로 Stackblitz 를 소개하고 있다. https://ko.reactjs.org/docs/getting-started.html#online-playgrounds 수업에서는 컴퓨터에 직접 개발환경을 셋팅하기로 하며, 몇 가지 툴체인 중 Create React App 사용 (참고 https://ko.reactjs.org/docs/create-a-new-react-app.html#create-.. 2022. 3. 27. 이전 1 다음 728x90
