React - 컴포넌트 만들기

/src 폴더 내에 새로운 .js 파일 생성

 

맨 위에 React 를 사용한다고 선언

import React from 'react';

 

 

React 컴포넌트를 만드는 방법 2가지(함수, 클래스)

 

함수로 먼저 만들어보자

 

※ 컴포넌트 이름은 대문자로, 다음 단어 있으면 또 대문자로

※ <div></div> HTML같이 생겼지만, JSX 이라 부름

※ export default Hello; 는 Hello라는 컴포넌트 내보낸다는 뜻

※ 맨 뒤에 세미콜론은 있어도 없어도 노상관

 

- hello.js -

import React from 'react';

function Hello(){
  return <div>안녕하세요</div>;
}

export default Hello;

 

- App.js -

import 할 때, 파일명 Hello.js에서 .js 는 생략해도 된다.

이후 가운에 <Hello /> 를 입력하면

import React from 'react';
// import logo from './logo.svg';
// import './App.css';
import Hello from './hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

위에 처럼 브라우저에 자동으로 입력된다.

<Hello />로 UI 조각 처럼 사용 Wow... 새로운 기능을 찾았을 때 기분이 너무 좋다ㅎㅎ

 

- index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ReactDOM.~~~ 이부분은 id가 root인 것을 찾아 그 안에 <App />이라는 React 컴포넌트를 넣겠다는 뜻

그러면, id가 root인 것은 어디있을까

/public에 index.html 을 보면 id가 root인 부분이 있다.