조젤리의 개발일기

react를 최신버전으로 업데이트를 하기위해 npm install react@latest react-dom@latest 입력했더니 해당 문제가 발생했다. 설치하려는 폴더에 설치가 되어있어 발생할 가능성이 높다. 폴더에 있는 node_modules, package-lock.json 삭제 후 재설치 하자

Typo in static class property declaration porpTypes생성 중 발생된 오류 소문자 대분자를 주의해서 사용하자 PropTypes(x) propTypes(0) Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.string.isRequired };

prop-types란? props는 전달받은 props가 내가 원하는 props인지 확인해주는 역할을 한다. 프로젝트 파일에 들어가서 npm i prop-types를 해준다. 설치확인은 package.json에서 확인 설치방법 프로젝트 파일에 들어가서 npm i prop-types를 해준다. 설치확인은 package.json에서 확인 사용이유 만약 ⇒ picture를 보내야 하는데 imges를 보내거나 한다면 props가 들어가지 않을 것이고 component는 제대로 작동하지 않을 것이다. 때문에 prop-types를 사용한다. 사용방법 import PropTypes from "prop-types”

React를 이용해 img를 삽입하는 작업을 하다보니 img 부분에서 경고가 발생했다. alt를 넣지 않아서 생기는 경고인데 alt는 시각장애인을 위한 정보이다. 이를 작성하는게 code style에 도움이 된다. 고로 경고문을 해결하려면 img 에 alt를 삽입해주도록 하자. function Food({name , picture}) { return ( ); }

2022-03-29 react 18이 릴리즈되었습니다. ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 자세히 알아보기: https://reactjs.org/link/switch-to-createroot react-dom: ReactDOM.render은 더 이상 사용되지 않습니다. 사용시 console창에 경고 발생하며, React 17 모드에서 앱을 실행합니다. 경고 화면 종속성 업그레이드 npm install react@rc react-dom@rc 렌더링 방법 변화 react 17 ->18 // before const container = document..

react의 기본구조는 불편해서 개발자는 쉽게 사용하기 위해 jsx를 사용한다. jsx의 문법은 html과 비슷하여 사용하기 더 편리하다. jsx를 가져오고 html에 root라는 id를 가진 div를 가져왔다. jsx문법을 이용해 작성 ->jsx로 변형된다면 Title을 h3생각하고 보면된다. botton을 jsx이용해 작성 ->jsx 로 react구조로 변형된다면 jsx방식으로 구성해준다. Container를 함수로 구현 ->jsx로 변형된다면 이런구조 이를 html에 렌더링 해준다. () => 의 구조를 모른다면 function으로 생각하면된다.