REACT 시작 - ⚛️

강의 링크 : https://www.youtube.com/watch?v=6GECT2Jrr_g 

react 프로젝트 생성

• npm init react-app 프로젝트이름
• package.json에 보면 각 모듈들 설치 내용들이 들어있다.
• npm start 하면 index.js 파일이 실행된다.

• JSX - JavaScriptXml html을 자바스크립트 안에서 쓸 수 있게 함.
• index.js 에 App.js import >
• root id 찾아서 create Root로 만들어주고 그안에 App을 랜더 함.
• reportWebVitals() : 웹 퍼포먼스 측정을 위한 라이브러리

App.js 자바스크립트에서 HTML 사용 ⇒ JSX

 

 

컴포넌트 방식

• 함수형 컴포넌트 방식 (요새 많이 쓰이는 방식)

       (함수형 컴포넌트 입맛에 맞게 화살표 함수로 변경해서 사용)

• 클래스 컴포넌트 방식

 

싱글페이지 애플리케이션 : 메뉴를 클릭할 때 마다 서버에서 페이지가 컴파일되서 페이지가 날아오는 개념이 아닌, 실제로는 index.html 페이지가 하난데 메뉴를 클릭할 때 마다 필요한 부분만 바꿔 나가는 방법이다.

 

---

 

react 기초 배우기

• 메뉴를 클릭 할 때마다 원하는 컴포넌트를 매핑시키기는 것을 라우팅 처리를 한다고 한다.
• 브라우저 url이 바뀔때마다 랜더링 된다.
• router 를 위한 모듈 설치
  • npm install react-router-dom@6
  • 설치 위치 주의!

 

router 사용 방법

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

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

App.js

import React from 'react';
import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Counter from "./pages/Counter";
import Input from "./pages/Input";
import Input2 from "./pages/Input2";
import List from "./pages/List";
function App() {
  return (
    <div className="App">
      <nav>
        <Link to='/'>HOME</Link> || <Link to='/about'>ABOUT</Link> || <Link to='/counter'>Counter</Link> || <Link to='/input'>Input</Link> || <Link to='/input2'>Input2</Link> || <Link to='/list'>List</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/counter' element={<Counter></Counter>}></Route>
        <Route path='/input' element={<Input></Input>}></Route>
        <Route path='/input2' element={<Input2></Input2>}></Route>
        <Route path='/list' element={<List></List>}></Route>
      </Routes>
    </div>
  );
}

export default App;

 

state에 저장한 데이터 변화 감지 되면 계산 후 화면에 랜더링

import React, {useState} from "react";

const Counter = () => {
    const [num, setNumber] = useState(0);

    const increase = () => {
        setNumber(num+1);
    };

    const decrease = () => {
        setNumber(num-1);
    };

    return (
        <div>
            <button onClick={increase}> +1 </button>
            <button onClick={decrease}> -1 </button>
            <p>{num}</p>
        </div>
    )
}

export default Counter;

 

input으로 데이터 받고 화면에 랜더링 & 다중으로 받은 데이터 화면에 랜더링

[input]

import React, {useState} from "react";

const Input = () => {
    const [txtValue, setTextValue] = useState("");

    const onChange = (e) => {
        setTextValue(e.target.value);
    };

    return (
        <div>
            <input type="text" value={txtValue} onChange={onChange}/>
            <p>{txtValue}</p>
        </div>
    )
}

export default Input;

[input2]

import React, {useState} from "react";

const Input2 = () => {
    const [inputs, setInputs] = useState({
        name: "",
        email: "",
        tel: "",
    });

    const {name, email, tel} = inputs;

    const onChange = (e) => {
        const value = e.target.value;
        const id = e.target.id;

        setInputs({
            ...inputs,
            [id]: value,
        });
    };

    return (
        <div>
            <label>이름</label>
            <input type="text" id="name" value={name} onChange={onChange}/>
            <label>이메일</label>
            <input type="email" id="email" value={email} onChange={onChange}/>
            <label>전화번호</label>
            <input type="tel" id="tel" value={tel} onChange={onChange}/>
            <p>{name}</p>
            <p>{email}</p>
            <p>{tel}</p>
        </div>
    )
}

export default Input2;

 

배열로 받은 데이터 map을 이용한 반복문 랜더링

// 배열로 들어오는 데이터 랜더링 방법
import React from "react";

const UserList = () => {
    const users = [
        {email: "you@gmail.com", name:"유재석"},
        {email: "song@gmail.com", name:"송지효"},
        {email: "ha@gmail.com", name:"하하"},
        {email: "kim@gmail.com", name:"김종국"},
        {email: "lee@gmail.com", name:"이광수"},
    ]

    const User = ({userData}) => {
        return (
            <tr>
                <td>{userData.email}</td>
                <td>{userData.name}</td>
            </tr>
        )
    }

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>이메일</th>
                        <th>이름</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user) => (
                        <User userData={user}/>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

export default UserList