자 다음과 다르게 renderFood function을 호출하자 다음과 같이 호출한다면 object들을 가지고 오는것을 확인할 수 있다. 근데 여기서는 return을 해야하는데 map은 여기서 뭐가 돌아오든 array로 돌려주기 때문이다~! 그래서 다음과 같이 해주면된다. 그럼 이것이 이전과 같은 방법으로 아래와 같이 출력된다. 다음과 같이 코드를 구성하면 이상한 아웃풋을 볼 수 있다. foodLike.map(renderFood)를 하면 기본적으로 여기에 food component와 같은 array를 가져오게 된다. 기본적으로 을 하는거라고 생각하면된다. 째뜬 첫번째로 했던것들이 훨 좋기때문에 다시 돌아가보자~! 그리고 console에서 봤던 에러들을 살펴보자. import React from "reac..

map을 이용해서 데이터를 가져와보자~! map은 rendering하는 것인데 array로부터 나에게 array를 주는 것이다. 다음과 같이 friends가 있다. 그럼 이 array를 가지고 싶다면 mpa은 array의 각 item에서 function를 실행하는 array를 가지는 javascript function이며 그 function의 result를 갖는 array를 나에게 준다. 첫번째 argument는 current 이름 옆에 작은 하트를 더하고 싶다면 map을 사용하면된다. 그럼 우리코드에도 입혀보자. import React from "react"; function Food({ name }) { return I like {name}; } const foodILike = [ { name: "K..

자 그럼 다시 potato파일을 없애고, 관련 소스들을 지우자. 그리고 다음과 같이 함수로 만들어내서 해보자. 그럼 정상적으로 출력되는 것을 확인할 수 있다. 다음으로는 prop prop은 string, boolean, number등 다 된다. father component에서 children component로 원하는 많은 props들을 보낼 수 있다. 그리고 fav만 출력해보자. 다음과 같이도 나타낼 수 있다. 다음과 같이 다르게 prop을 줘서 나타낼 수 도 있다.

그럼 src에 Potato 컴포넌트를 만들어서 App컴포넌트에 불러와보자. 그럼 다음과 같이 정상적으로 출력된다.

자 그럼 우선필요없는 파일들은 다 지워주자. 그럼 다음과 같이 두개의 파일만 남기자~! App.js import React from "react"; function App() { return ( Hello ); } export default App; index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(, document.getElementById("root"));

이번에는 최신판으로 배웠었지만, 이전 버전의 React도 계속 통용되고 있기 때문에 이전버전의 React를 한번 배워보도록 하겠다. 아래의 명령어로 새로운 프로젝트를 하나 만들어보자. npx create-react-app movie_app_2019 그럼 이걸 VScode로 열어보자. 그리고 Readme를 다음과 같이 써보자. # Movie App 2019 React JS Fundamentals Course (2019 Update!) 그리고 package.json의 scripts에 우리가 사용할 start, build만 남기고 다른것들은 다 지워버리자~! 근데 나는 그냥 뒀다~ 그리고 yarn.lock도 필요 없으니 지워버리자~! 그리고 아래의 명령어로 시작하면된다. npm start 그러면 두개의 링크가..