🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

#2.2 동적으로 데이터를 추가하는 방법 🍧 이번 시간에는 웹사이트에 동적 데이터를 추가하는 방법에 대해 알아보겠다. 🍧 지난시간처럼 복사 붙여넣기는 비효율적! function App() { return ( hello!! ); } 지난시간에는 컴포넌트를 이렇게 복사해서 붙여넣었기 때문에 효율적이지 않다. 왜냐하면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하기 때문이다. 데이터를 우리가 처음부터 가지고 있던 데이터가 아니라 웹사이트에서 가지고 온 데이터라면 이렇게 할 수 없다. 데이터가 어떤 API를 통해 우리가 전달받는다고 상황을 가정한다. 따라서 할 일은 함수를 만드는 것이다. const foodILike = [{ name: "Kimchi", image: "http://aeriskitch..

#2.1 Reusable Components with JSX + Props(컴포넌트에서 정보를 보내고 사용하는 법) 🍨 이번시간에는 컴포넌트에서 정보를 보내고, 정보를 사용하는 방법을 알아볼 것이다. 우리는 컴포넌트를 file을 이동하면서 작성하고 싶지 않기 때문에 App.js에서 컴포넌트를 작성하는 작업을 할 것이다. import React from "react"; function Potato(){ return I like Potato.; } function App() { return ( hello!! ); } export default App; ↑ App.js 이렇게 App.js 파일 하나에서 Potato 함수를 만들어서 사용할 수 있다. 🍨 JSX 에서는 컴포넌트에 정보를 보낼 수 있다! → 재사용..

#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..