ReactJS (2)

· react

: 그 곳에 쓰는 모든 요소를 생성한다는 것,

자바스크립트와 함께 그것들을 만들고 그것들을 HTML에 밀어넣음,

모든 react application을 div 사이에 넣음,

react는 소스코드에 처음부터 HTML을 넣지않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고 있음

-> application이 이것을 로드할 때, 빈 HTML을 로드하게되고 그런 다음에 react가 HTML을 밀어넣게 됨 (component에 작성해뒀던 것들)

 

· virtual DOM (virtual document object model)

: 소스코드에는 존재하지 않음, react가 만들어냄

-> react가 빠른 이유, virtual이고 존재하지 않기 때문

 

- npm start 상태를 유지해야 함

: 해당 페이지가 시작되지 않거나 페이지를 찾을 수 없다는 메시지가 나옴

(서브를 제대로 실행하지 않았기 때문)

 

· <App />

: index.js 파일 안에 있음,

기본적으로 이것을 component라고 부르고 react는 component와 함께 동작함,

component가 data를 보여주게 함,

component는 HTML을 반환하는 함수,

react는 component를 사용해서 HTML처럼 작성하려는 경우에 필요함

 

· jsx

: javascript와 HTML 사이의 이러한 조합,

react에서 나온 매우 custom한 유일한 개념 (react에 특화된 개념)

 

* Creating your first React Component

 - src 안에 새로운 파일을 만듦 (파일명.js)

- component를 작성할 때 마다 import React from "react" 를 써줘야 함

: 하지 않으면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못함

 

- Potato.js

import React from "react";

 

function Potato() {

    return <h3>I love potato</h3>;

}

 

export default Potato;

 

- index.js (o)

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import Potato from './Potato';

 

ReactDOM.render(

  <React.StrictMode>

    <App /><Potato />

  </React.StrictMode>,

  document.getElementById('root')

);

 

- index.js (o)

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import Potato from './Potato';

 

ReactDOM.render(

    <App />, document.getElementById('root') //react application이 하나의 component만을 rendering

);

 

- index.js (x)

//react application이 하나의 component만을 rendering해야하기 때문

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import Potato from './Potato';

 

ReactDOM.render(

    <App /><Potato />, document.getElementById('root') 

);

 

//App.js 안에서 Potato.js를 사용해야 함

//react application은 한 번에 하나의 component만 rendering할 수 있음!

- App.js

import React from 'react';

import Potato from './Potato';

 

function App() {

  return (

    <div className="App">

      <h1>Hello</h1>

      <Potato />

    </div>

  );

}

 

export default App;