⚛️React : section03

* section01부터 setcion02까지의 수업은 OT와 React설치 방법을 강의 했기 때문에 따로 포스팅 하지 않아 section03부터 포스팅을 시작한다.

리액트는 import와 export의 형식으로 이루어져 있다. 즉, 컴포넌트 형식인데 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있고, 재사용 가능하며, 다른 컴포넌트와 조합하여 복잡한 UI를 구성할 수 있다. React 애플리케이션은 이러한 컴포넌트들의 계층 구조로 이루어져 있다. 아직은 상태라던거 훅에 관해서는 수업을 다루고 있지 않기 때문에 우선 scr폴더 안에 있는 App.js와 index.js의 관계를 살펴보면 아래와 같은 형태이다.

index.js와 app.js의 코드의 형태는 아래와 같다. 

App.js

 

import logo from './logo.svg';

import './App.css';

function App() {

  return (

    <h1><a href='#' onClick={() => { alert("test") }}>hello!</a></h1>

  );

}

export default App;

index.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

// 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();