생활코딩으로 배우는 2022 react

https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7

React

사용자 정의 태그를 만드는 라이브러리, component

react를 구현하는 방법 중에 class를 이용하는 방법과 function을 이용하는 방법이 있으며, function을 통해 구현할 것이다.

Step 0

Create react-app

$ npx create-react-app .
현재 디렉터리에 react를 사용할 수 있는 기본 환경 조성

$ npm start
src/index.js가 실행

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

root를 선언하고 document.getElementById('root')로 렌더링을 한다.
그리고 App.js을 수정해서 디자인을 구현한다.

그리고 root라는 id를 가진 tag는 public/index.html에 있다.

Deploy

$npm run build
배포하기 위해 최적화 적용, 빌드가 끝나면 build directory가 생긴다.

Step 1

prop

attribute

component tag의 속성(prop)은 component function의 props로 전달
props는 Object 형식으로 속성값을 가지고 있다.

Node.js와 React

pass