할머니의 콤퓨타 도전기

이전 게시글에서 작성한 코드를 실행하면 Warning: Each child in a list should have a unique "key" prop.이 뜬다. 이 전에 favFood를 Array로 만들어서 각각의 item을 구별할 수 있는 고유한 key가 없어서 warning이 뜨는 것이다. React의 모든 element들은 다르게 보여야 한다. 따라서 favFood 각각의 item에 고유한 id를 부여하고 Food component에 key props 생성 후 favFood안의 id를 불러와 대입 에러가 사라짐. key props는 Food component 자체로 사용되는게 아닌, React 내부에서만 사용. 즉 React가 알 수 있는 고유 id가 부여된 것이다. img elements must..

map map은 Array 내부의 각각의 item에 대해 function을 적용하고 새로운 Array를 형성 friends 배열 선언 console.log(item)을 통해 friends element를 하나씩 출력하고 0을 리턴함으로써 모든 원소의 값이 0인 새로운 Array를 형성함. 이처럼 map 활용 가능

props (property) children component의 props는 parent component에서 넣는 정보 Food component 생성 후 fav라는 props로 sushi라는 value를 넘겨줌. 위와 같이 props 여러개도 가능. string type 뿐만 아니라 boolean, array 등 다 가능 전달한 부모 component(App)에서 전달한 props는 Food component의 argument로 사용함. props를 console log 찍으면 다음과 같이 Object로 출력됨 자식 component(Food)에서 props의 fav의 접근하고자 하면, 위와 같이 {props.fav} 로 적어주면 됨. props를 계속 치는게 귀찮다면 {}를 통해 fav에 바로 접..

component html을 반환하는 function 위와 같이 App component를 만들어줄 수 있음. 과 같은 방식으로 component를 사용할 수 있음. 이는 function으로 정한 App component를 불러오는 것을 의미. JSX javascript 안의 html javascript와 html사이에서 component를 이용해 html을 rendering하는 개념 Create a React Component Potato component 생성. 주석과 같이 새로운 component 생성할 때 마다, import React from "react";를 써줘야함. export default Potato;를 통해 JSX로써 html에 rendering 할 수 있게됨. index.js에서 P..

function App() 사이에 Hello을 추가해줌. index.html의

Requirments node -v npm -v npx -v git --version Create React App npx create-react-app folder_name Start React App npm start