react 기본 사용법

react-router-dom

• BrouserRouter : HTML5의 history API를 활용하여 UI를 업데이트
• HashRouter :URL의 hash를 활용한 라우터, 정적인(static)페이지에 적합
  -> 보통 동적인 페이지를 제작하므로 보편적으로 사용

❗react-router-dom 설치

npm install react-router-dom

❗react-router-dom 사용

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

❗BrouserRouter

• 프로젝트에 라우터 적용
• 프로젝트 최상단인 index.js에 적용하면 자식에서 라우팅 기능 사용 가능

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

❗Route

• 특정 주소에 연결

<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />

❗Link

• 클릭하면 다른 주소로 이동

<Link to="/">Home</Link>

❗페이지 이동 예제 (App.js)

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

import Home from "./pages/Home";
import About from "./pages/About";

function App() {
return (
  <div className="App">
    <nav>
      <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 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;

useState : 컴포넌트에서 상태(컴포넌트에서 동적인 값)를 관리할 수 있음

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

-> 상태의 기본값을 파라미터로 넣어서 호출
-> 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수(파라미터로 전달받은 값을 최신상태로 설정)

 

setNumber(num+1);

-> num은 num+1이 됨

 

❗텍스트 입력 페이지

import React, {useState} from 'react';

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

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

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

        </div>
    );
}

export default Input;

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

-> 이벤트가 발생할 때마다 txtValue에 넣어줌

 

❗여러개의 데이터 입력 페이지

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;
        
        // inputs[id] = value; -> 상태관리가 안됨
        // 깊은 복사를 해야함, 새로운 object를 만듦
        setInputs({
            ...inputs,
            [id]:value
        })
    }

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

            <p>이름 : {name}</p>
            <p>이메일 : {email}</p>
            <p>전화번호 : {tel}</p>
        </div>
    );
}

export default Input2;

 

 

❗배열 데이터 출력 페이지

import React from 'react';

// 배열 데이터 출력
const User = ({userData}) => {
    return (
        <tr>
            <td>{userData.name}</td>
            <td>{userData.email}</td>
        </tr>
    );
}

const UserList = () => {
    const users = [
        {email : 'ryu@gmail.com', name: '유재석'},
        {email : 'kim@gmail.com', name: '김종국'},
        {email : 'ha@gmail.com', name: '하하'},
        {email : 'song@gmail.com', name: '송지효'}
    ];

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

}

export default UserList;