Sumin's Blog

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";..

Java Script 동적 (html은 정적) : 이 태그 안 쪽에 있는 코드를 javascript로 해석 button 타입, 버튼안에 들어가 있는 내용 hi, onclick의 속성값은 반드시 javascript onclick의 속성값은 웹브라우저가 기억하고 있다가 사용자가 클릭했을 때 문법에 따라 해석해서 웹브라우저가 동작 event(사건): 웹브라우저 위에서 일어나는 일들 ex) onclick (이벤트가 실행되었을 떄 어떠한 JS가 일어남) 숫자 데이터 타입 -산술 연산자(+, -, *, /) 문자 데이터 타입- string.length() , string.indexof(' ') 등등 변수 쓸 때 var 앞에 쓰기 ->body 태그의 스타일 바꿈 버튼을 만들어서 낮과 밤에 맞는 스타일링..