react 컴포넌트

시작 전, 필요없는 코드들을 지워주고 시작한다. (/src/index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

불필요한 주석, ReactStrict Mode, reportWebVitals.js 에 대한 코드들을 지웠습니다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

React에서 컴포넌트를 만드는 방법은 2가지가 있다.

 

1. class를 이용해 만든다.

 

2. hooks을 이용해 만든다. (함수형)

 

이전 방식에는 class로 만드는 경우가 많았지만, 현재 React 개발팀에서 hooks로 만드는 것을 권장하고, 요즘 트렌드가 hooks로 만드는 것이기 때문에 hooks로 해보도록 한다!

 

/src/App.js 에 기존에 작성된 코드들을 지우고 아래와 같이 수정한다.

function App() {
  return (
    <div>Project01</div>
  )
}

export default App;

간단히 설명하자면,

 

function App() {

  return (

    <div>Project01</div>

  )

}

(컴포넌트에 대한 정의 구현 부분)

이 함수는 jsx라는 템플릿을 리턴하는데 jsx는 javascript와 xml을 합쳐서 코드를 사용하는 확장자이다.

 

export default App;

(정의한 컴포넌트를 export해서 사용 - 모듈화)

 

이렇게 구분할 수 있다.

 

위 코드를 작성하고 터미널에 npm start를 다시 실행시키면,

웹 브라우저에 이런 화면이 그려진다. ㅎㅎ

 

npm start 명령어 실행 -> /public/index.html 불러옴 -> id = root -> /src/index.js -> /src/App.js

 

대략 이 순서라고 보면 되겠다. ㅎㅎ

 

 

 

 

* 추가 설명 

1. export로 App을 내보낸다.(App.js 제일 하단 참조)

2. import로 App.js를 가져와서 사용한다.(index.js 상단 참조)