React 1 - React 빠르게 복습하기 - Hello world

1. node와 npm을 다운로드 합니다.

 

node와 npm은 리액트 프로젝트를 하기 위한 기초 단계입니다.

 

2. npx create-react-app app이름

 

터미널을 열어 해당 커맨드를 입력하여 react-app을 다운로드 만듭니다.

vue를 할 때 처럼 리액트도 마찬가지로 npx create-react-app 을 입력만 해주면 간단하게 프로젝트가 만들어집니다.

 

vue는 App 컴포넌트 아래 다양한 컴포넌트들을 추가하면서 프로젝트를 만들어나갔는데요

 

react도 비슷한 구조입니다.

 

일단

 

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

root는 reactDOM 객체의 루트가 되고 그곳에 App컴포넌트들 rendering한다고 되어있습니다. root는 id가 root인 div인데요

 

index.html에 보면 id가 root인 div가 있습니다. 이 곳에 render를 해주고, 컴포넌트들을 갈아껴주면서 앱이 작동하는 구조라고 보면 되겠습니다.

 

React 프로젝트를 하기 위해선 Hello World를 얼른 찍어봐야할텐데요

 

빠르게 컴포넌트를 하나 만들어서 띄어보도록 하겠습니다.

 

src 폴더에 Hello.js를 하나 만들고 다음과 같이 적어줍니다.

import React from 'react';

class Hello extends React.Component {
  render() {
    return <h2>Hello, from a class component!</h2>;
  }
}

export default Hello;

이게 기본 구조라고 생각하시면 됩니다. React를 import해서 Hello 클래스에 React.Component를 상속받아줍니다.

 

이제 이 클래스는 리액트 컴포넌트가 되었습니다.

 

render 함수에 반환 값으로 태그를 작성해줍니다.

 

그리고 다른 컴포넌트에서 가져다 써야하니 export default 값을 넣어줍니다.

 

이제 이 컴포넌트를 App에서 불러줍시다.

 

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

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

리액트의 컴포넌트에서는 class를 className으로 정의해줍니다. App에 Hello를 입포트해서 넣어줍시다.

 

그리고 해당 리액트 폴더로 이동해서 npm start를 해주면?

 

정상적으로 값들이 나오는 것을 확인할 수 있습니다.

 

리액트로의 발걸음을 드디어 뗐습니다.