[React] React.js 입문 - 1

이번 kdt 해커톤에 참여하게 되며 react 를 사용하기로 결정되었다. 때문에 한 번도 안 배워 본 거 찍먹 시도 중..

따라한 영상 - 한 시간 만에 끝내는 React.js 입문

 

react 프로젝트 구조를 명령어를 이용해 빠르게 생성할 수 있도록 도움

npm init react-app [프로젝트명]

npm : 노드 패키지 매니저 를 의미

react.js 를 사용하기 위한 module들이 자동으로 다운 받아진다.

 

특징

[프로젝트] > public > index.html 하나만 가지고 구동하게 된다.

pakage.json 전체 프로젝트에 대한 정보를 가지고 있다.

Single Page Application 이다.
단일 페이지로 구성된 웹 애플리케이션으로 렌더링의 역할을 서버에 넘기지 않고 브라우저에서 처리하는 방식.
클라이언트 단에서 처리하기 때문에 빠르다.

 

연결

cd [프로젝트명]
npm start

성공적으로 연결됨을 의미. index.js 에 적힌게 실행 된다.

 

jsx : 자바스크립트 xml을 의미 (자바스크립트를 확장해서 xml을 쓸 수 있게 지원) 

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

import App from './App';	src > App.js 의미
<React.StrictMode>     <App />   </React.StrictMode>	html 과 연동
reportWebVitals();	웹 퍼포먼스를 측정하기 위한 js 라이브러리

 

리액트 컴포넌트 만들기

크게 두가지가 있다. 

1. 함수형 컴포넌트

자바스크립트 함수를 이용하는 것

Home.js

function Home (){
    return <h1>Home 화면</h1>
}

export default Home;

화살표 함수

const Home = () => { 
    return <h1>Home 화면</h1>
}

export default Home;

 

2. 클래스형 컴포넌트

import React, {Component} from "react";

class Home extends Component {
    render(){
        return <h1>Home 화면</h1>
    }
}

export default Home;

class 키워드, render() 를 사용

 

함수형 컴포넌트 실습

App.js

import Home from "./pages/Home";

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

export default App;

<div className="App">       <Home />     </div>	html 태그 같아 보이지만 실질적으로는 jsx 이다. 때문에 html과 100% 동일하지 않다.

 

라우팅 처리

원하는 컴포넌트를 매핑시킨 후에 보여주는 것을 말한다.

 

필요한 모듈 설치 할 때 프로젝트로 옮기는 것 잊지 말기.
- @6는 버전을 지정한것

react (main)$ cd my-app                                  
react/my-app (main)$ npm install react-router-dom@6

 

index.js

import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';

BrowserRouter : 웹 브라우저 라우팅 할 때 가장 보편적으로 사용되는 라우터 이다.

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

<BrowserRouter> 태그를 추가 후 <App /> 태그를 그 안으로 넣어준다.

 

App.js

import React from "react";
import {Routes, Route, Link} from 'react-router-dom';

import Home from "./pages/Home";


function App() {
  return (
    <div className="App">
      <nav>
      {/* a 태그 처럼 사용된다. */}
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        {/* 브라우저 패스가 바뀔 때 마다 어떤 컴포넌트를 매칭할지 정의 해야함*/}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

 

import {Routes, Route, Link} from 'react-router-dom';	router 에서 import 해옴
<Link to="/">Home</Link>	코드에서 a 태그로 변환된다.
<Routes> </Routes>	매칭된 컴포넌트인 Route 태그를 묶는 태그
<Route path="/" element={<Home />} />         <Route path="/about" element={<About />} />	매칭된 컴포넌트

 

원리

App.js

Link 태그에서 to 에 지정된 값과 같은 path를 가진 Route를 찾아 속성(element)에 할당되어 있는 컴포넌트를 보여주는 것이다.