@노마드코더
🐱깃허브 : ReacJS로_영화 웹 서비스 만들기

서버 실행

npm start
리엑트 서버를 띄운다.

리액트

리액트는 소스코드에 처음부터 HTML파일을 넣지 않고 HTML에 HTML들을 추가하거나 제거한다.
그래서 어플리케이션이 이것을 로드할때, 빈 HTML을 로드하고, 라액트가 HTML을 밀어넣게된다.

virtual DOM

virtual document object model
가상의(존재하지 않음) 문서 객체 모델

컴포넌트

예제코드 - 1

// App.js
function App() {
  return (
    <div className="App">
		<h1>Hello!!</h1>
    </div>
  );
}

export default App;

해당 코드에서 아래내용 부분은 HTML이라는 것을 알 수 있다.

<div className="App">
    <h1>Hello!!</h1>
</div>

예제코드 -2

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

하지만 이부분에서의 태그를 보면 HTML인것 같으면서 아닌부분이 있는데,
이 부분을 컴포넌트(component)라고 한다

<App />

컴포넌트(component)

컴포넌트는 HTML을 반환하는 함수이다.

• 컴포넌트를 사용해서 HTM처럼 작성하려는 경우 리액트를 사용한다
• 최신 리액트인 경우 여러 컴포넌트를 랜딩할수 있다.
• 예전의 경우 하나의 컴포넌트만 돌아가도록 되어 있다
  • 이 경우 원하는 컴포넌트들을 최상단의 컴포넌트에 집어넣는 방법으로 사용할 수 있다.

JSX

• 자바스크립트와 HTML사이의 조합을 부르는 말
• 리액트에서 나오는 고유 개념이다.
• 자바스크립트안의 HTML이라고 보면 된다.