React 기본 개념 및 컴포넌트와 라우팅 설정하기

서버 명령어를 치기 위해 간단한 cmd나 bash명령어 정도는 알아두면 좋음.

#####cmd명령어
#전체 폴더 값 보기
dir

#폴더 이동
cd 폴더명 

#d드라이브로 이동
d:   

#상위폴더 이동
cd..

#####리액트 run
#리액트 폴더에서 start해야 됨.
cd test-app

#리액트 서버 시작
npm start

#종료
ctrl+c

 

또한 리액트는 localhost:3000번 포트를 사용한다.

크롬에 localhost:3000이라고 치면 리액트 애플리케이션이 브라우저에 로드됨.

 

📢 리액트 기본 개념

⬛ 리액트(React)는 싱글 페이지 컴포넌트 방식으로, 하나의 페이지에서 여러 컴포넌트를 렌더링한다.

    👉🏻 컴포넌트는 대문자로 시작하는 걸 원칙으로 하고, 재사용성과 확장성이 뛰어남.

⬛ React에서는 JSX(JavaScript XML) 구문을 사용하여 HTML과 유사한 구조로 컴포넌트를 정의

⬛ Virtual DOM: 실제 DOM의 가상 복사본을 사용해 렌더링 속도와 최적화를 개선

⬛ Hook: 함수 컴포넌트에 기능을 추가할 수 있게 해주는 기능(ex useState, useRef)

⬛ Props: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용

⬛ 애플리케이션 구조

    👉🏻 App.js: 애플리케이션의 최상위 컴포넌트.

    👉🏻 index.js: App.js를 실제 DOM에 렌더링.

    👉🏻 index.html: root DOM 요소를 포함하는 HTML 파일

⬛  node_modules

    👉🏻 고용량으로 압축 시 시간이 오래 걸림.  => 폴더 삭제 후 npm install로 재설치

⬛  react-router-dom

    👉🏻 npm i react-router-dom 명령어를 입력해서 설치(애플리케이션마다 설치필요)

    👉🏻 <Link to='/컴포넌트명'>test</Link>

 

📢 실습

1. my-app 리액트 폴더 생성
2. 컴포넌트 1,2,3 각각을 누르면 이동되도록 라우터로 연결

<header>
comp1  comp2   comp3
-------------------------------
Home영역입니다.
comp1영역입니다.
comp2영역입니다.
comp3영역입니다.
-------------------------------
<footer>
-------------------------------

 

<App.js>

import "./App.css"
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header from "./components/Header";
import Home from "./components/Home";
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";
import Comp3 from "./components/Comp3";
import Footer from "./components/Footer";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/comp1" element={<Comp1 />} />
            <Route path="/comp2" element={<Comp2 />} />
            <Route path="/comp3" element={<Comp3 />} />
          </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

 

 

<Home.jsx, Comp1.jsx, Comp2.jsx, Comp3.jsx>

//Home.jsx
import React from 'react';

const Home = () => {
    return (
        <div className='home'>
            <div>Home 영역입니다.</div>
        </div>
    );
};

export default Home;
////////////////////////////////////////////////////////////////////////////////////
//Comp1.jsx
import React from 'react';
import './comp.css';
import { friends } from '../data/data';
import Table from 'react-bootstrap/Table';

const Comp1 = () => {
    return (
        <div className='comp1 comp' style={{width:'500px',margin:'50px auto'}}>
            <div>Comp1.jsx 영역</div>
        </div>
    );
};

export default Comp1;
////////////////////////////////////////////////////////////////////////////////////
//Comp2.jsx
import React from 'react';
import './comp.css';
import Counter from './Counter';
import Input from './Input';
import Color from './Color';
import Input2 from './Input2';


const Comp2 = () => {
    // Count 예제
    // Hook : 기능을 할 수 있게 해주는 역할
    // useState() : 상태변화
    return (
        <div className='comp2'>
            <div>Comp2 영역입니다.</div>
        </div>
    );
};

export default Comp2;

////////////////////////////////////////////////////////////////////////////////////
//Comp3.jsx
import React, { useState } from 'react';
import {Link} from 'react-router-dom';
import './comp.css';

const Comp3 = () => {
    return (
    <div className='comp3'>
        <div>Comp3 영역입니다.</div>
    </div>
    );
};

export default Comp3;