[React] 프로젝트 만들기 part6

Reference

이 프로젝트는 코딩애플 리액트 강의를 참고하여 제작되었습니다.

https://codingapple.com/course/react-basic/

---

---

LifeCycle 

[React] LifeCycle

[React] LifeCycle

 

 

---

---

useEffect

[React] useEffect

[React] useEffect

 

 

 

유즈이펙트

- 유즈이펙트 내부코드는 html 렌더링 후에 동작합니다.

- 연산이 많은 코드를 유즈이펙트 내부에 사용하면 뷰가 먼저 실행됩니다.

- 그리고 무거운코드가 실행됩니다.

- 그러므로 렌더링 시간이 줄어듭니다.

 

언제 쓰나요?

- 어려운 연산

- 서버에서 데이터 가져오는 작업

- 타이머 장착하는거

---

---

회원탈퇴를 원하는 고객을 약올립니다.

 

routes/Remove.jsx

회원탈퇴 유아이를 만듭니다.

 

 

App.js

리무브 임포트 합니다.

import Remove from "./routes/Remove";

 

라우트노페이지 아래에 라우트를 추가합니다.

<Route path="/remove" element={<Remove />} />

 

 

 

Remove.jsx

유즈스테이트와 유즈이펙트를 임포트 합니다.

import { useState } from "react";
import { useEffect } from "react";

 

 

 

리턴 위에 모달스를 유즈스테이트로 초기화하고 트루로 세팅 합니다.

let [modals, setModals] = useState(true);

 

 

 

리턴 비지워닝디브를 위 코드로 체인지 합니다.

모달을 터너리오퍼레이터로 콘트롤 합니다.

모달스가 트루면 모달 보여주고 아니면 널

      {/* 'modals' 상태가 true일 경우에만 경고창을 렌더링합니다. */}
      {modals === true ? (
        <div className="bg-warning p-4">
          <h2 style={{ marginBottom: "400px" }}>
            If you want remove your account please tab button{" "}
          </h2>
          <button>remove</button>
        </div>
      ) : null} {/* 'modals'가 false면 아무것도 렌더링하지 않습니다. */}

 

 

 

리턴 바로 위에 유즈이펙트로 모달을 최대한 빨리 사라지게 해서 회원탈퇴를 못하게 막습니다.

그리고 약올립니다.

  useEffect(() => {
    let a = setTimeout(() => {
      setModals(false);
    }, 2000);
  }, []);

 

 

 

 

열받은 고객이 계속 시도하면 더미 코드가 계속 쌓일것 같습니다.

클린업펑션으로 관리합니다.

  // 'modals'라는 상태를 정의하고 초기값을 true로 설정합니다.
  // 이 상태는 모달(경고창)의 표시 여부를 결정합니다.
  let [modals, setModals] = useState(true);

  // 이펙트 훅(useEffect)을 사용하여 컴포넌트가 마운트될 때 한 번만 실행될 로직을 구현합니다.
  // 두 번째 인자로 빈 배열([])을 전달하여 마운트 시에만 실행되도록 설정합니다.
  useEffect(() => {
    // 2초(2000ms) 후에 'setModals' 함수를 호출하여 'modals' 상태를 false로 변경합니다.
    // 이는 경고창을 숨기는 역할을 합니다.
    let a = setTimeout(() => {
      setModals(false);
    }, 2000);

    // 컴포넌트가 언마운트될 때(사라질 때) 실행될 클린업 함수를 반환합니다.
    // 이 함수는 'setTimeout'으로 설정한 타이머를 취소하여 메모리 누수를 방지합니다.
    return () => {
      clearTimeout(a);
    };
  }, []); // 빈 배열은 이 이펙트가 컴포넌트가 처음 렌더링될 때 한 번만 실행되도록 보장합니다.

---

test

모달캡쳐가 가능한 속도라면 실패입니다.

 

---

Completion

 

 

Remove.jsx

import { useState } from "react";
import { useEffect } from "react";

export default function Remove() {
  let [modals, setModals] = useState(true);
  useEffect(() => {
    let a = setTimeout(() => {
      setModals(false);
    }, 2000);
    return () => {
      clearTimeout(a);
    };
  }, []);
  return (
    <div className="container">
            {modals == true ? (
        <div className="bg-warning p-4">
          <h2 style={{ marginBottom: "400px" }}>
            If you want remove your account please tab button{" "}
          </h2>
          <button>remove</button>
        </div>
      ) : null}
      <h2 className="my-2">sorry time out</h2>
      <img
        src="https://mblogthumb-phinf.pstatic.net/MjAyMjA3MDhfMjM1/MDAxNjU3MjY2NDMwMTUw.TMpPAEviN8RMubZbZS_qtyHYVh9oc8XCGGTm7Qc2EhAg.2HNlyzepoH0sbkNazZGpBBPQ0u2loljFcHOwfvJJo8cg.JPEG.ahtskswl/%25EB%258B%25A4%25EC%259A%25B4%25EB%25A1%259C%25EB%2593%259C_(17).jpg?type=w966"
        width="100%"
      />
    </div>
  );
}

 

 

 

 

App.jsx

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Routes, Route, Link, Outlet } from 'react-router-dom';
import data from './data.jsx';
import Detail from './routes/Detail';
import Remove from './routes/Remove';

export default function App() {
  let [shoes] = useState(data);

  return (
    <div className="App">
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            Navbar
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <Link to="/" class="nav-link active" aria-current="page">
                Home
              </Link>
              <Link to="/detail" class="nav-link active" aria-current="page">
                Detail
              </Link>
              <Link
                to="/company/manpower"
                class="nav-link active"
                aria-current="page"
              >
                Manpower
              </Link>
              <Link
                to="/company/map"
                class="nav-link active"
                aria-current="page"
              >
                Map
              </Link>
              <Link to="/remove" class="nav-link active" aria-current="page">
                account remove
              </Link>
            </div>
          </div>
        </div>
      </nav>

      <Routes>
        <Route
          path="/"
          element={
            <>
              <div className="main-bg"></div>

              <h1 className="my-5">Nike shop</h1>

              <div className="d-flex flex-column mb-3">
                {shoes.map((shoe, i) => {
                  return <Goods shoes={shoe} i={i}></Goods>;
                })}
              </div>
            </>
          }
        />
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path="/company" element={<Company />}>
          <Route path="manpower" element={<Manpower />} />
          <Route path="map" element={<Map />} />
        </Route>
        <Route path="*" element={<Nopage />} />
        <Route path="/remove" element={<Remove />} />
      </Routes>

      <div class="card m-5">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <a href="#" class="btn btn-primary">
            Go somewhere
          </a>
        </div>
      </div>
    </div>
  );
}

function Goods(props) {
  return (
    <div className="p-2">
      <img
        src={
          'https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s' +
          (props.i + 1) +
          '.PNG'
        }
        width="80%"
      />
      <h4 className="my-3">{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  );
}

function Company() {
  return (
    <div>
      <h4 className="my-3">company</h4>
      <p>It's a company</p>
      <Outlet></Outlet>
    </div>
  );
}

function Manpower() {
  return (
    <div>
      <img
        src="https://plus.unsplash.com/premium_photo-1688821131205-52f5c633ce69?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        width="80%"
      />
    </div>
  );
}

function Map() {
  return (
    <div>
      <img
        src="https://images.unsplash.com/photo-1548345680-f5475ea5df84?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        width="80%"
      />
    </div>
  );
}

function Nopage() {
  return (
    <div>
      <h4 className="my-2">No page</h4>
      <p>hmmm....</p>
      <img
        src="https://cdn.maily.so/ixmvzk5qh83mee5kcjw8pp55fihe"
        width="80%"
      />
    </div>
  );
}

 

 

 

 

참고사이트 : ca06

ca06