출처 - 리액트를 다루는 기술(김민준 지음) 4. JSX 문법 (1) element 감싸기 모든 element들은 최상단의 부모 element 하나로 감싸져야 한다 function App() { return ( 리액트 안녕! 잘 작동하니? ); } 꼭 div 태그를 사용하고 싶지 않으면 Fragment 기능을 사용할 수도 있다. import fragment가 필요하다. import { fragment } from 'react'; function App() { return ( 리액트 안녕! 잘 작동하니? ); } (2) JavaScript 표현식 JSX 내부에서 JS 표현식을 사용하려면 { } 로 감싸면 된다 import React from 'react'; function App() { const name..

출처 - 리액트를 다루는 기술(김민준 지음) 1. 코드 이해하기 create-react-app 으로 만든 리액트 프로젝트 파일 알아보기! src/App.js 최상단에는 다음과 같은 코드가 있다. import React from 'react'; import logo from './logo.svg'; import './App.css'; 번들러 번들러(bundler)는 Node.js 환경에서만 지원하는 module import, export 기능을 브라우저에서 사용하게끔 도와준다. 번들(bundle)은 묶는다는 뜻이므로, 파일을 묶듯이 연결해 준다. 웹팩 번들러의 종류에는 웹팩, Parcel, browserify 등의 도구 들이 있으며 리액트에서는 주로 웹팩을 사용한다. 웹팩의 편의성과 확장성이 다른 도구보다..