React 컴포넌트

리액트 컴포넌트가 무엇인지 리액트 애플리케이션을 생성하면서 만들어진 App.js를 통해 알아봅시다!

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

컴포넌트는 App입니다.

하단의 export default App을 통해 App이라는 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다.

컴포넌트는 자바스크립트 함수 또는 자바스클비트 클래스 형태로 생성할수있습니다!!

아래는 자바스크립트 함수로 컴포넌트를 구현한 것입니다. 클래스로 구현하면 reder()함수를 작성해 주어야합니다.

class App extends React.Componet{
render() {
     return ( 
     <div className="App"> 
      <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
           </header>
            <p className="App-intro"> To get started, edit 
            <code>src/App.js</code> and save to reload.
             </p>
          </div>
        );
     }
}

두 코드 모두 자바스크립트 파일 내에서 HTML 코드를 사용하고 있습니다.

이는 React가 한 파일에서 HTML과 JS를 함께 사용하려고 확장한 자바스크립트 문법입니다.

이 문법을 JSX라고 합니다. 

App컴포넌트는 이처럼 렌더링 부분인 HTML과 로직 부분인 자바스크림트를 포함하는 JSX를 리턴합니다.

이 JSX문법은 Babel이라는 라이브러리가 빌드 시 자바스크립트로 번역해 줍니다!

그럼

App컴포넌트는 어떻게 사용할수 있을까요?

우리는 이미 SPA를 통해 이 부분을 학습했습니다!

ReacDOM.render() 함수의 매개변수로 <App/>을 주면 ReactDOM App 컴포넌트를 랜더링한다는 사실입니다.

다시 말해

ReactDOM은 매개변수로 넘겨받은 <App/> 컴포넌트를 이용해 DOM 트리를 만드는데 이때 컴포넌트의 render() 함수가 반환한 JSX를 랜더링합니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

현재 이렇게 된곳에서 일어나고있는 일은 다음과 같습니다.

• import 를 이용해 App컴포넌트를 불러옵니다.
• <컴포넌트 이름/>을 이용해 컴포넌트를 사용합니다.

ReactDOM.reder는 첫 번째 매개변수로 리액트 컴포넌트를 받습니다.

두 번째 매개변수로는 root앨리먼트를 받습니다. 이는 root앨리먼트에 첫 번째 매개변수로 넘겨진 리액트 컴포넌트를 root앨리먼트아래에 추가하라는 뜻입니다.

root앨리먼트는 index.html에 정의 되어있습니다.

React로 만든 모든 컴포넌트는 이 root앨리먼트 하위에 추가됩니다.