react of component

1. 컴포넌트

ReactDOM.render(
    <App />,
    //△컴포넌트를 사용하고자 할 때 컴포넌트의 형태
  document.getElementById('here')
);

컴포넌트 <App/>을

App처럼 사용할 수 없다. 이러한 형태는 리액트로 동작하지 않는다.

 

 

 

2. component는 HTML을 반환하는 함수이다.

function App() {
  return (
    <div className="App">
      hello!
    </div>
  );
}

 

App() 함수는,

HTML을 반환return한다.

 

 

3. js와 html 사이의 이러한 조합을 우리는 jsx 라고 부른다.

react에서 나온 개념이다.

 

4. 컴포넌트를 작성할 때마다,

import React from "react";

를 써준다. 대소문자를 꼭 구분하자.

 

이것을 하지 않으면 react는 jsx가 있는 컴포넌트를 사용하는 것을 이해하지 못함.

 

5. 이제 우리가 컴포넌트를 이용해보자.

src\Potato.js

 

funtion을 적어줄 때 앞글자는 대문자로 적어준다.

 

Potato (O)

potato (X)

 

import react from "react";

function Potato() {
    return <h3>hello there</h3>
}

Potato를 선언만 해주었을 뿐, export를 시켜주지 않았으므로 export까지 시켜주자.

import react from "react";

function Potato() {
    return <h3>hello there</h3>
}

export default Potato;

 

이렇게 만들어진 Potato.js를 어떻게 쓸까?

 

src\App.js로 가서 import를 해준 뒤 컴포넌트 해본다.

 

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div>
      hello!
       <Potato/>
    </div>
  );
}

export default App;

 

*index.js로 가지 않고 App.js에 넣는 이유:

react application은 한번에 하나의 component만 reading 할 수 있다.

 

 

---

 

파일정리를 한 뒤 App.js 에서 모든 걸 해결해보도록 하자.

 

import React from 'react';  
function Potato() {
  return <div>I love potato</div>
}

function App() {
  return (
    <div>
      hello!
       <Potato/>
    </div>
  );
}

export default App;

 

결과: