프론트엔드7-2. React의 구조(index.html, App.js, index.js)

https://everysmallstep.tistory.com/195

프론트엔드7-1. React 설치 (Node.js 설치)

VS code에서 react 실행하는 방법

• Terminal >  reactSrc 폴더로 이동 > npm start (이미 앞에서 프로젝트를 생성해놓았다.)

 

index.js	src 폴더에 있으며 메인프로그램이다. 서버가 실행될 때 index.js로 된다. 여기에서 HTML 템플릿(index.html) 및 JS의 컴포넌트(App.js)를 조합해 렌더링하고 실제 표시한다.
App.js	src 폴더에 있으며 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용은 여기에서 정의된다.
index.html	public 폴더에 있다. 메인 프로그램인 index.js와 연동되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 얻어와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀 시 오류발생)

 

• index.html, index.js파일은 빌드시 예약된 파일이어서 지우면 안된다!
• 프로그램 작성은 전부 src 아래에 해야한다. 만약 src 폴더 바깥에 있는 파일을 import키워드로 가져오려면 실패한다.
• 반응형이어서 저장만 하면 결과가 실행된다. 

---

index.js(App.js와 index.html을 연결)

• 외부 모듈을 로드하는 import 최초에 'react', 'react-dom'라는 모듈을 로드하고 있고, 이것들이 React의 본체
• ReactDOM.render(첫번째인수, 두번째인수)
  • 첫번째인수: App.js으로 정의하고 있는 App 컴포넌트를 지정하고 있다. App.js 파일안에 있는 return된 함수를 불러온다. 
  • 두번째인수: root라는 ID의 요소를 지정(document.root는 index.html의 <div id="root">를 가리키고 있다.)
• ReactDOM.render 함수 첫 번째 파라미터를 두 번째 파라미터에 렌더링한다!(App.js에서 생성된 리액트 코드를 index.js에서 불러온 후, public에 있는 index.html의 id가 root인 곳에다가 넣는다.)
• 그외의 코드는 부가사항이다. 

 

---

App.js

• App.js파일은 세 개의 부분으로 나눌 수 있다. 상단의 import 문들, 중앙의 App 컴포넌트(함수), 하단의 export 문
• import문은 App.js가 다른 곳에 정의된 코드를 사용할 수 있게 해준다. ( ./App.css 파일을 가져와서 사용)
• JavaScript는 helloWorld와 같은 카멜케이스 이름을 선호하는 반면에 React는 파스칼-케이스(pascal-case)변수 이름을 사용한다. (JSX 요소가 React 컴포넌트이지, 정규 HTML 태그가 아니라는 것을 하기 위해서)
• JSX표현식(HTML 태그를 따옴표 없이 쓸 수 있는 구조) : 원래 JS에서는 HTML태그를 ""와 같이 썼다.
  • 브라우저는 도움 없이는 JSX을 읽을 수 없기 때문에 Babel(바벨)을 사용해 컴파일 할때 자바스크립트 형태의 코드로 변환될 수 있다. 
  • JSX는 react에서 HTML을 쉽게 작성할 수 있도록하는 방법이다.

JS표현식

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

JSX 표현식

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

• export default: 파일 외부로 데이터를 내보낼 수 있는 기능 (App 컴포넌트들을 다른 모듈에서 사용할 수 있게 한다.)
• 함수이름(function 함수이름( ){ })이 파일명(App.js)과 같지 않아도 된다. return만 함수이름과 같으면 된다.
  • 예) function Hello ( ){ }  export default Hello; -> 실행결과는 같음

 

 

 

---

html웹 브라우저 바로 실행하는 법

VScode marketplace -> open in browser 설치 -> 설치 후 html 문서에서 ALT+B 

 

---

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

React 시작하기 - Web 개발 학습하기 | MDN