웹개발일지

리액트 프로젝트를 열면 App.js가 있다. 처음 리액트를 마주했을 때 궁금했던 점이, js파일에 html 코드를 작성해서 띄운다는 점이었다. 원초적인 방법으로 생각해보면 html을 만들고 만든 html 파일을 불러와 띄우는 것인데, 요 App.js에 쓰여진 코드를 보아하니 App() 함수 안에서 return 함수를 사용하여 html코드들을 반환해주고 있더라. 요게 단순히 js 문법만은 아니고, 이렇게 리액트에서 html 코드를 js파일에서 사용할 수 있게 하는 JSX 문법이 따로 있다.   간단히 보면 우선 div 코드와 h4코드가 쓰였다. div태그에는 css 속성인 className이, h4태그에는 값으로 {post} 변수가 들어가 있다. 이 때, 변수를 불러와 바로 보여주기 위해 {}를 써서 연결..

import React from 'react'; class Card extends React.Component { render() { // react ele -> DOM const img = "img/strings.png"; const imgalt = "string"; const desc = "A very authentic and beautiful instrument!!"; const price = 100; const productName = "Strings"; return( {productName} price: {price} {desc} Buy ); } } 리액트 컴포넌트는 React.Component를 상속받는 자바스크립트 클래스다. render(): 리액트 앨리먼트를 반환하며, 리액트 컴포넌트를 일..