INDEX

1. 저번시간 숙제
2. useEffect 실행조건 주기
3. clean up function
4. 빡통식 정리의 시간
5. 오늘의 숙제

1. 저번시간 숙제

   import { useParams } from "react-router-dom";
   import { useState, useEffect } from "react";
   
   function Detail(props) {
       let {id} = useParams();
       let find = props.shoes.find((x) => x.id == id)
       let [timeAlert, setAlert] = useState(true);
   
       **useEffect(() => {
           // 여기 적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
           // 근데 html 렌더링 이후에
           let time = setTimeout(() => {
               setAlert(false)
           }, 2000)
   
   				// 여기는 useEffect 이전에 실행됨
   				// 따라서 여기는 cleanup function을 작성함
           return () => {
               clearTimeout(time)
           }
   		// []은 dependency를 준것. 한번만 실행됨
       }, []);**
   
       return (
           <div className="container">
               **{
                   timeAlert == true
                   ? <div className="alert alert-warning">2초 후에 사라집니다.</div>
                   : null
               }**
               <div className="row">
                   <div className="col-md-6">
                       <img src={process.env.PUBLIC_URL + '/img/shoes'+(Number(id)+1)+'.jpg'} width="100%" />
                   </div>
                   <div className="col-md-6">
                       <h4 className="pt-5">{props.shoes[id].title}</h4>
                       <p>{props.shoes[id].conent}</p>
                       <p>{props.shoes[id].price}원</p>
                       <button className="btn btn-danger">주문하기</button>
                   </div>
               </div>
           </div> 
       );
   }
   
   export default Detail;
   

   react 조건부 연산자_삼항연산자

   삼항 연산자 참고

2. 빡통식 정리의 시간

   useEffect(()=>{ }) //재렌더링마다 코드 실행
   useEffect(()=>{ }, []) //mount시 1회 코드 실행
   useEffect(()=>{
   	return ()=>{
   		// unmount시 1회 코드 실행
   	}
   }, [])
   useEffect(()=>{ }, [count]) //특정 state 변경시에만 실행(state 명)
   

3. 오늘의 숙제

   <input>에 숫자말고 다른거 입력하면 그러지 말라고 안내메시지 띄우기

   import { useParams } from "react-router-dom";
   import { useState, useEffect } from "react";
   
   function Detail(props) {
       let {id} = useParams();
       let find = props.shoes.find((x) => x.id == id)
       let [timeAlert, setAlert] = useState(true);
       **let [checkNum, checkAlert] = useState('');**
   
       useEffect(() => {
           // 여기 적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
           // 근데 html 렌더링 이후에
           let time = setTimeout(() => {
               setAlert(false)
           }, 2000)
   
           **if(isNaN(checkNum) == true){
               alert("숫자만 입력하시오");
           }**
   
           return () => {
               clearTimeout(time)
           }
       }, **[checkNum]**);
   
       return (
           <div className="container">
               {
                   timeAlert == true
                   ? <div className="alert alert-warning">2초 후에 사라집니다.</div>
                   : null
               }
               <div className="row">
                   <div className="col-md-6">
                       <img src={process.env.PUBLIC_URL + '/img/shoes'+(Number(id)+1)+'.jpg'} width="100%" />
                   </div>
                   <div className="col-md-6">
                       <input ***onChange={(e)=>{checkAlert(e.target.value)}}***/>
                       <h4 className="pt-5">{props.shoes[id].title}</h4>
                       <p>{props.shoes[id].conent}</p>
                       <p>{props.shoes[id].price}원</p>
                       <button className="btn btn-danger">주문하기</button>
                   </div>
               </div>
           </div> 
       );
   }
   
   export default Detail;