React8 [React] Class Components and State dynamic data : 변하는 데이터 state : object. 바꾸고 싶은 데이터를 state 안에 넣는다. function App() --> class App extends React.Component로 변경 (function component --> class component) React.Component는 return이 없고 render method가 있음 render method에서 return 실행 Class component는 render method 자동 실행 class component는 state를 가지고 있기 때문에, function component가 아닌 class component 사용 state를 선언하고 render()에서 {this.state.count} 형식으로 구.. 2020. 7. 27. [React] Protection with PropTypes foodILike list에 rating 추가 terminal > npm i prop-types (설치) package.json > dependencies > prop-types가 있으면 설치 완료! prop-types : 우리가 원하는 component가 맞는지 확인 시켜준다. App.js > import PropTypes from "prop-types"; App.js > Food.propTypes 정보 추가 (type, required 여부) 참고 https://ko.reactjs.org/docs/typechecking-with-proptypes.html PropTypes와 함께 하는 타입 확인 – React A JavaScript library for building user interfaces k.. 2020. 7. 27. [React] Map Recap Food에 id 추가 id를 추가해야 에러 발생하지 않음 import React from 'react'; function Food({name, picture}) { return I like {name} } const foodILike =[ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { id: 2, name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC.. 2020. 7. 27. [React] Dynamic Component Generation (다이나믹 컴포넌트 만들기) Map array 내 item이 갖는 결과값을 array 형태로 준다. array.map(function(current) { console.log(current); return 0 } [0, 0, 0, 0] 출력 friends.map(function(friend) { return friend + "🥰"; }) 친구 이름 + 🥰를 갖는 array 출력 출처 https://nomadcoders.co/react-fundamentals/lectures/1549 All Courses – Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 코드 import React from 'react'; function Food({name, picture}) { retur.. 2020. 7. 27. 이전 1 2 다음
