gukbi

React

useState

setValue(cb:((value:any) => any):void Usage

import { useState } from 'react';

function App () {
    const [student,setStudent] = useState({});
    setStudent((prev) => ({...prev, name: "Alice" }));
}

useEffect

useEffect Example

App.js

Timer

import React, { useEffect } from 'react';

function TimerComponent() {
  useEffect(() => {
    // Setup logic here
    const interval = setInterval(() => {
      console.log('1초마다 실행됨');
    }, 1000);

    return () => {
      // Cleanup logic runs when component unmounts
      clearInterval(interval);
      console.log('타이머 제거됨');
    };
  }, []);

  return <div>타이머가 실행 중입니다. 콘솔을 확인하세요.</div>;
}
export default TimerComponent;

React Router

Install

# NPM
npm install react-router-dom

# PNPM
pnpm install react-router-dom

Router Example

import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App(){
    return (
        <BrowserRouter basename={process.env.PUBLIC_URL}> /* This use homepage of package.json as root path, This is required for GitHub Pages */
            <Routes>
                <Route path="/" element={'This is root page'} />
                <Route path="/hello" element={'This is hello'} />
                <Route path="/user/:userId" element={'This is user page of userId, variable as userId'} />
                <Route path="*" element={'This is else page'} />
            </Routes>
        </BrowserRouter>
    )
}

This site is open source. Improve this page.