리액트 hook (useState와 useEffect)

React의 단방향 데이터 흐름

props를 단방향으로 내려준다. 

동일한 props를 전달하면, 동일한화면이 렌더링되어야한다.

한 함수는 동일한 Input에, 동일한 output이 나와야한다 => pure function

 

 

리액트의 훅은 컴포넌트의 lifecycle 개념과 관련이있다.

 

일부 블로그들을 보면 개념설명이 너무 어렵게되어있어서 이해가 어려웠다.

내가 알아볼수있도록 정리해보자!

 

컴포넌트의 Lifecycle : 컴포넌트의 인생

컴포넌트 -> 등장 -> 업데이트(재렌더링) -> 퇴장

 

Hook을 통하여 컴포넌트의 인생에 딴지를 걸수있다.

 

Lifecycle의 hook 

원래는 class 컴포넌트에서

componentDidmount() : 컴포넌트가 마운트(등장)가되엇을때 특정 코드를 실행해주세요

componenWillunmount() : 컴포넌트가 언마운트(퇴장,빠이빠이)가되엇을때 특정 코드를 실행해주세요

 

useEffect hook

 

UseEffect를 통해 우리는 언제 코드를 실행할지 선택권을 가질수있다. 

 

• 컴포넌트가 마운트 되었을때
• 컴포넌트가 업데이트 되었을때
• 컴포넌트가 사라질때 

특정코드를 실행할수있다.

 

useEffect(()=>{
	setTimeout(()=>{
    실행할코드
    },2000)
})

• 컴포넌트가 사라질때 

useEffect(()=>{
	return function 어쩌구(){실행할코드 <- 컴포넌트 언마운트될때 실행된다}
}) //무조건 함수를 써야한다. arrow function으로도 사용가능

요즘 만들고있는 쇼핑몰 프로젝트를 통해 useEffect를 사용해보자

2초후 aleart 창을 안보이게 하고싶다 ?? 

 

내가짠 코드

import React, { useEffect, useState } from 'react'
import { useHistory , useParams } from 'react-router-dom'



function Detail(props){

    const [isRest, setIsrest] = useState(false)

    useEffect(()=>{
        setTimeout(() => {
           setIsrest(true)
        }, 2000);
    })

    let { id } = useParams()
    let items = props.shoes.find((item) => item.id == id)
    let history = useHistory(); //history라는 object 방문기록등을 저장해놓은!!
    //history.pupsh('/')<-버튼을 누르면 이 경로로 이동해주세요 : 버튼 커스터마이징할수있슴다~!

    function Rest (){
        return( 
        <div className="my-alert2">
          <p>재고가 얼마 남지 않았습니다.</p>
        </div>
        )
 
    }

    return (
        <div className="container">
            <div>
                <p className="red">Detail</p>
            </div>
          {isRest ? null : <Rest /> }
          <div className="row">
            <div className="col-md-6">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
            </div>
            <div className="col-md-6 mt-4">
              <h4 className="pt-5">{items.title}</h4>
              <p>{items.title}</p>
              <p>{items.price}원</p>
              <button className="btn btn-danger">주문하기</button> 
              <button className="btn btn-danger">뒤로가기</button> 
            </div>
          </div>
      </div>  
      )
    };
  export default Detail;

인강에서 짠 코드

 

function Detail(){

  let [ alert, alert변경 ] = useState(true);
  useEffect(()=>{
    let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000);
  });
  
  return (
    <HTML많은곳/>
    {
      alert === true
      ? (<div className="my-alert2">
          <p>재고가 얼마 남지 않았습니다</p>
        </div>)
      : null
    }
  )
}

 

컴포넌트 등장/업데이트 될시 실행된다 => 즉 위의 코드는 버그가 생길 가능성이높다.

=> 두번째 인자의 배열을 이용해서 자원낭비를 막을수있다. 

[isRest]를 집어넣으면  <- isRest가 변경이 될때만 실행이되는 훅이된다. 

 

useEffect는 여러개 쓸수있다

그러나. 적은 순서대로 실행이된다.