[React] (6) Lifecycle과 useEffect

1. 컴포넌트  Lifecycle

- Detail.js

function Detail(props) {
    let {id} = useParams();
    let idx = props.shoes.find((x) => x.id == id);

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={'https://codingapple1.github.io/shop/shoes'+(idx.id+1)+'.jpg'} width="100%" />
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{idx.title}</h4>
                    <p>{idx.content}</p>
                    <p>{idx.price}원</p>
                    <button className="btn btn-danger">주문하기</button> 
                </div>
            </div>
        </div> 
    )
}

=> Detail 컴포넌트

(1) Detail 컴포넌트는 Detail 페이지 들어가면 보임 => mount

(2)  Detail 컴포넌트 안에서 state 같은 것 조작하면? => update

(3) Detail 페이지에서 Home으로 돌아가면 컴포넌트는 필요 없어짐 => unmount

 

=> Lifecycle(mount, update, unmount) 중간중간 hook을 걸 수 있음

 

 

 

 

- 옛날 React에서 Lifecycle hook 쓰는 방법

class Detail2 extends React.Component {
    componentDidMount() {
        // 컴포넌트 mount시 여기 코드 실행됨
    }
    componentDidUpdate() {
        // 컴포넌트 update시 여기 코드 실행됨
    }
    componentWillUnmount() {
        // 컴포넌트 unmount시 여기 코드 실행됨
    }
}

 -> class 문법으로 컴포넌트를 만들고 그 안에 함수명을 써주면 각각 특정 Lifecycle에서 코드 실행할 수 있음

 

★ 요즘 React에서 Lifecylcle hook 쓰는 방법 = useEffect

 

2. useEffect

** useEffect : mount, update시 코드 실행시켜줌

    useEffect(()=>{ 실행할 코드 }, [])

 

- Detail.js

import { useEffect, useState } from 'react';

function Detail(props) {
	useEffect(() => {
    	// 여기 적은 코드는 컴포넌트 mount & update 마다 실행됨.
    	console.log("My Shop");
    });
    
    let [count, setCount] = useState(0);
    
    return (
    	{count}
    	<button onClick={()=>{ setCount(count+1) }}>버튼</button>
    )
}

  * mount

     - 로딩시 log 찍힘

  *  update

     -임의로 count라는 state를 만들어서 확인해보자

       -> 버튼을 클릭할때마다 state가 변경되면서 log 찍힘

=> useEffect 정상작동

 

** console.log를 useEffect 바깥에 넣어도 똑같이 실행된다..!

  -> 차이는 시점 차이! useEffect를 사용하는 이유를 확인해보자

 

(1) useEffect를 사용하는 이유

    - useEffect 안에 있는 코드는 html 렌더링 후에 동작한다.

    - useEffect에 들어갈 것은 함수의 핵심기능(html 렌더링)이 아닌 그 외의 쓸데없는 기능들이다.

      (Side Effect 코드 보관함이라 불림)

       * Side Effect : 함수의 핵심기능 외에 쓸데없는 기능들

  -> 시간이 오래걸리는 어려운 연산 / 서버에서 데이터 가져오는 작업 / 타이머 장착하는거

 

(2) useEffect에 넣을 수 있는 실행조건

  * useEffect()의 둘째 파라미터 []

    -> 변수나 state같은 것들을 넣을 수 있음

 

(예시1) 파라미터에 아무것도 넣지 않은 경우

useEffect(()=>{ 실행할코드 }, [])

    -> 컴포넌트 mount시 1회 실행하고 영영 실행해주지 않습니다.

 

(예시2) 파라미터에 state를 넣은 경우

 

useEffect(()=>{ 실행할 코드 }, [count])

    -> [ ]에 있는 변수나 state가 변할 때만 실행됨

    -> [ ] 안에 state 여러개 넣을 수 있음

 

(3) clean up function

 (예시) 

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

  ** clean up function : useEffect 안에 있는 코드를 실행하기 전에 return ()=>{ } 안에 있는 코드를 실행한다.

-> (예시)에서 return()=> { } 부분이 없으면?

    useEffect 안에 썼기 떄문에 컴포넌트가 mount될 때마다 실행되겠지만

    setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나 생김

 

## 코딩애플 React part2 강의 내용 ##

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

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌