INDEX

1. 컴포넌트의 Lifecycle

2. Lifecycle hook 다는 법

3. 뭐야 useEffect 안에 안써도 똑같은데요

4. 오늘의 숙제

   노란 박스 하나 만들고 Detail 페이지 방문 후 2초 후에 박스가 사라지게 해보십시오.

1. 컴포넌트의 Lifecycle

   class Detail2 extends React.Component {
     componentDidMount(){
       //Detail2 컴포넌트가 로드되고나서 실행할 코드
     }
     componentDidUpdate(){
       //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
     }
     componentWillUnmount(){
       //Detail2 컴포넌트가 삭제되기전에 실행할 코드
     }
   }
   

   useEffects(()=>{
   	// 이런 식
   })
   

2. Lifecycle hook 다는 법

   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)
   
       **useEffect(() => {
           // 여기 적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
   				// 근데 html 렌더링 이후에
           console.log('안녕');
       });**
   
       **let [count, setCount] = useState(0);**
   
       return (
           <div className="container">
               <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> 
                       **<button onClick={()=> { setCount(count+1) }}>버튼</button>**
                   </div>
               </div>
           </div> 
       );
   }
   
   export default Detail;
   

   따라서 조금이라도 html 렌더링이 빠른 사이트를 원하면 쓸데없는 것들은 useEffect 안에 넣어보기