React 개념 : 컴포넌트 (Component)

컴포넌트란 (Component) ?

- 리액트에서 기능을 나눌때의 최소 단위이다.

- 리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 모두 컴포넌트로 구성된다.

컴포넌트는 JSX 라는 문법을 사용해서 만들어지는데 이는 HTML + javascript 언어를 조합한 언어이다.

리액트는 <APP/> 과 같은 표시를 컴포넌트로 인식하고, 그 컴포넌트가 반환하는 값을 화면에 그려준다.

다음은 index.js 에서 APP 컴포넌트를 사용하는 코드이다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('root'));

여기서 추가적으로 컴포넌트를 추가하고 싶다면 다음과같이 Test 컴포넌트를 생성한뒤 실행하면 다음과 같은 결과를 얻을수 있다.

import React from 'react';
function Test() {
  return (
    <div> 
        <h1>Ha Ha Test!!!</h1>
    </div>
  );
}
export default Test;

참고로 index.js 와 index.html 의 코드는 아래와 같다.

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';

ReactDOM.render(<Test/>, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

참고 : DO it! 클론코딩 영화 평점 앱서비스