Sumin's Blog

2.4 Protection with PropTypes 목표 : father comonent로부터 전달 받은 props가 우리가 예상한 props인지 점검할 필요가 있음 각각의 요소에 추가할 것은 rating (number type) 점점 많은 props를 food object로 전달하고 싶기 때문 (component와 Food의 인자에도 추가시켜줌) prop-types : 내가 전달받은 props가 원하는 props인지 확인 import PropTypes from "prop-types"; 코드 추가해줘야함 Food.propTypes={ //이름은 무조건 propTypes 여야함 name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired..

2.3 map Recap map은 각각 item별로 function을 호출 function renderFood(dish){ return ; } function App(){ return ( {foodILike.map(renderFood)} ); } //map에 renderFood라는 함수를 인자로 줘서 renderFood 함수에서 별도로 return값을 정의 console.log(foodILike.map(renderFood))} error가 뜸 이유? 기본적으로 react component react의 item들은 모두 유일해야함 이들을 list안에 집어넣을 떄, 유일성을 잃어버리게 됨 해결방법 각각의 item에 id라는 속성을 추가 (각각 다른 name과 image를 갖고있지만 react는 똑똑하지 않아..

2.2 Dynamic Component Generation map: array의 각 item에 function을 적용 후, 그 result로 array를 반환 import React from 'react'; function Food({ob,picture}){ return I like {ob} } const foodILike = [ { name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4..

#2.1 Reusable Components with JSX + Props JSX 장점 : 재사용 가능한 component를 만들 수 있음 component를 계속해서 반복 사용 가능 Food component에 정보를 보내는 방법 fav라는 이름의 property 를 kimchi라는 value로 줌 다양한 타입의 value를 가질 수 있음 console.log(props)를 출력하면 property: value 모두 출력됨 누군가가 food component로 정보를 보내려고 하면, react는 모든 property를 가져옴 그리고 food function component의 argument(인자)로 모든 property를 넣음 props 중 fav의 값 출력 하기 위함 probs.fav -> {fav..

2.0 Creating your first React Component 리액트 : 개발자가 쓰는 모든 요소들을 생성 Java Script로 만들고 HTML에 넣음 모든 요소들을 사이에 넣음 Virtual document object -> react는 virtual 이여서 빠름 npm start 를 콘솔에서 계속 실행해야 서버가 실행 가능 componenet : HTML을 반환하는 함수 ( react는 componenet와 함께 동작 ,모든 것이 component) ex) (component의 형태) component를 사용해서 HTML처럼 작성하려는 경우에 필요 HTML 과 JS 의 조합으로 jsx라고 불림 (react 사용 유일한 개념) potato.js import React from "react";..