🧸이번에는 리액트 컴포넌트를 만들 때 사용하게 되는 문법인 JSX에 대해서 알아보겠다. 🧸 JSX란? JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하게 되는 문법이다. 얼핏보기에는 HTML처럼 생겼지만, 사실은 자바스크립트이다. 어떻게 자바스크립트가 되냐면, 바벨이라는 도구를 통해서 XML 형태의 코드가 자바스크립트로 변환이 된다. babeljs.io 를 들어가서 확인할 수 있다. 다음과 같이 babel에서는 왼쪽의 코드(JSX)를 저렇게 바꾸어준다는 것이다. 매번 createElement라는 것을 써서 호출하기엔 너무 어려우니까 JSX 문법을 통해 쉽게 작성하고, 바벨이 이를 변환해준다. 🧸 JSX의 규칙 JSX에도 규칙이 있다. 그 규칙에 대해서 알아보겠다. JSX에서 return 뒤에 사용..

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