---

오전

• 공가

수업내용 : App.js에서 Detail페이지로 {id}를 통한 연결.

이전설치

npm install bootstrap bootstrap
npm install react-router-dom@6

추가설치

npm install styled-components 

src/app.js

import Detail from './components/Detail';
import Data from './data.js'

function App() {
let [shrits, setShrits] = useState(Data);
return (
	<Routes>
		<Route path='/detail/:id' element={<Detail shrits={shrits} />} />
	</Routes>
)
}

Detail

  let {id} = useParams();  
  let findId = props.shrits.find((x)=> x.id == id);
  //console.log(findId);
  let [count, setCount] = useState(0);

---

오후

할인메시지 출력

상황설정 : Detail페이지를 방문시 1시간이내라면 할인메시지 3초간 출력 후 꺼짐
src/components/Detail.js

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function Detail(props) {

  let [count, setCount] = useState(0);
  let [alert, setAlert] = useState(true);

  useEffect(() => {
    let timer = setTimeout(() => {
      setAlert(false);
    }, 3000);
    return () => {
      clearTimeout(timer);
    };
  }, []);


return(
 <div className='container'> 

  {
    alert == true
    ? <div className="alert alert-warning">
    	방문하고 1시간 이내에 구매시 10%할인
    </div>
    : null
  }
</div>
);
}
export default Detail;

결과 :

상황설정 : Detail페이지를 방문시 1시간이내라면 할인메시지 깜빡깜빡

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function Detail(props) {

setTimeout(() => {
	setAlert(true);
}, 2000);
  
let [alert, setAlert] = useState(false);

  useEffect(() =>{
	setTimeout(() => {
     setAlert(false);
    },3000,[count]);
})
let[count,setCount] = useState(0);
return(
 <div className='container'> 

  {
    alert == true
    ? <div className="alert alert-warning">
    	방문하고 1시간 이내에 구매시 10%할인
    </div>
    : null
  }
</div>
);
}
export default Detail;

결과 : 깜빡깜빡

useEffect

https://velog.io/@meat7238/221128#useeffect

setTimeout

사용법

setTimeout(()=> {실행코드}, 시간)

isNan(:)

예제

let [num,setNum] = useState('');
useEffect(() => {
if( isNaN(num) == true) {
	alert('문자 숫자 안됩니다.')
}
},[num])
return (
	<button onClick={()=>{history.push("/")}}className="btn btn-dange
)

---

추가학습

[x] 교재 컴포넌트의 LifeCycle 메서드 p171
[ ] 교재 컴포넌트 스타일링 p216
[ ] 10장 일정관리 웹 애플리케이션 만들기 구현하기 실습