component(2)
-
#2.2 ~ 2.3 동적 데이터를 추가하는 방법 / map 함수 이용
#2.2 동적으로 데이터를 추가하는 방법 🍧 이번 시간에는 웹사이트에 동적 데이터를 추가하는 방법에 대해 알아보겠다. 🍧 지난시간처럼 복사 붙여넣기는 비효율적! function App() { return ( hello!! ); } 지난시간에는 컴포넌트를 이렇게 복사해서 붙여넣었기 때문에 효율적이지 않다. 왜냐하면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하기 때문이다. 데이터를 우리가 처음부터 가지고 있던 데이터가 아니라 웹사이트에서 가지고 온 데이터라면 이렇게 할 수 없다. 데이터가 어떤 API를 통해 우리가 전달받는다고 상황을 가정한다. 따라서 할 일은 함수를 만드는 것이다. const foodILike = [{ name: "Kimchi", image: "http://aeriskitch..
2021.04.12 -
#2.0 Creating your first React Component (컴포넌트에 대해 알아보기)
#2.0 Creating your first React Component (컴포넌트에 대해 알아보기) 🍟 이번 시간에는 컴포넌트에 대해 알아보겠다. 🍟 컴포넌트(Component)란 무엇인가? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); ↑ index.js 기본적으로 이것을 component라고 부른다. react는 component와 함께 동작하며 모든 것은 component이다. component는 무엇일까? component는 보다시피 HTML을 반환하는 함수이다. import React from..
2021.04.09