#2.0 Creating your first React Component (컴포넌트에 대해 알아보기)

#2.0 Creating your first React Component (컴포넌트에 대해 알아보기)

 

🍟 이번 시간에는 컴포넌트에 대해 알아보겠다.

🍟 컴포넌트(Component)란 무엇인가?

 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

↑ index.js

기본적으로 이것을 component라고 부른다.

react는 component와 함께 동작하며 모든 것은 component이다.

component는 무엇일까? component는 보다시피 HTML을 반환하는 함수이다.

 

import React from "react";

function App() {
  return (

    <div className="App">

      <h1>hello!!</h1>

    </div>

  );
}

export default App;

↑ app.js

 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

↑ index.js

우리가 component를 사용하고자 할때 이렇게 사용하는 것이다.

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

javascript와 HTML 사이의 이러한 조합을 jsx라고 한다.

jsx는 react에서 나온 유일한 개념이다.

 

🍟component를 만드는 방법

src안에 potato.js를 만든다.

그리고 component를 작성할 때마다 import React from "react"를 써주어야만 한다.

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

import React from "react";  

function Potato(){

    return <h3>I love Potato.</h3>

}

export default Potato;

이렇게 react를 import 해주고, 함수를 작성해주고 return으로 html 태그를 써주고, 이것을 export 해주면 된다.

 

🍟component를 사용하는 방법

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

Potato를 import해오고 저 중간에 <Potato />라고 쓰면 된다.

현재는 업데이트가 되어서 2개의 컴포넌트도 렌더링이 되는데, 강의를 찍을 시점에는 안되었나보다.

그래서 App.js에서 Potato를 불러온 후, 그 안에서 <Potato />라고 썼다.

 

import React from "react";

import Potato from "./Potato";

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Potato />

    </div>

  );

}

export default App;

↑ app.js

이렇게 써도 된다.

---

🍟요약

* 컴포넌트 : HTML을 반환하는 함수

* React는 컴포넌트 기반이며 컴포넌트는 리액트에서 나온 유일한 개념이다.

* JSX : Javascript와 HTML 사이의 이러한 조합을 JSX라고 한다.

* 여러 개의 컴포넌트를 렌더링할 수도 있고, 컴포넌트 안에서 또 컴포넌트를 불러올 수도 있다.