useEffect

: 페이지의 생명주기

[마운트]페이지가 처음 사용자 화면에 보였을때 ⇒ [언마운트]페이지가 사용자 화면에 사라졌을때

위 두 경우를 포함한, 이 사이에서 발생하는 모든 이벤트를 책임

state가 변화했을때 연쇄 이벤트

useEffect(함수, [의존성배열]) // 의존성 배열의 값이 바뀔때 실행할 함수

예시)

의존성 배열이 없기 때문에 페이지가 처음 보였을 때 단 한번만 실행 그럼 만약에 '내'가 state가 변경되었을 때 마다 안녕하세요를 콘솔에 찍어주고 싶다면? 아 그때는, 의존성 배열에 state를 넣어주면 되겠구나

import { useEffect, useState } from "react";

function UseEffect () {

  const [state, setState] = useState(false)
  
  useEffect( () => {
    console.log("안녕안녕")
  }, [state]) // 의존성 배열이 없기 때문에 페이지가 처음 보였을때 단 한번만 실행

  const onChangeState = () => {
    setState((prev) => !prev)
  }

  return (
    <div>
      {state ? "true입니다" : "false입니다"}
      <button onClick={onChangeState}>변경</button>
    </div>
  )
}
export default UseEffect;

그러면, useEffect는 언제 쓰는거야?

1. 페이지 열렸을 때 백엔드와 데이터 통신할때

   1. 예시 ⇒ 필기 확인 const [prodlist, setProdList] = useState(

   axios.get(/prod?id=${prodId}).then( (res) ⇒ { 백엔드에서 보내준 데이터 값 (상품정보, 회원정보, 게시글, 리뷰 .. 리스트) setProdList(prodlist); }).catch((err) ⇒ {

   const [prodlist, setProdList] = useState()
   
   await axios.get(/prod?id=${prodId}).then((res) => {
   	res => 백엔드에서 보내준 데이터 값 (상품정보, 회원정보, 게시글, 리뷰 ... 리스트)
   	setProdList(res.data); // 비동기
   if(prodList){
   * useState의 set함수는 비동기이기 때문에
   * useStaet가 변화한 후 사용하기 위해서는 useEffect[의존성 배열]를 활용
   * set함수에 이어서 같은 범위 내에 state함수를 사용하면
   * state가 바뀌기 전의 형태가 사용
   * 따라서 바뀐 state 값을 활용하기 위해서는 useEffect[의존성 배열]를 활용
   }
   }).catch((err)=> {})
   
   useEffect(()=>{
       if(!prodList) return; // useDidMounted
   
       .. 백엔드에서 받아온 데이터를 가공해야하거나
       .. state의 값이 변화 되었을 때 실행해줄 이벤트
       .. 연쇄(동기적) 이벤트
       setState2("test")
   },[prodList])
   
   useEffect(()=>{
       setState3("test")
   },[state2])
   
   => set함수는 비동기, 따라서 이후 동기 처리를 위해 effect 사용
   => 한 함수(범위,스코프,블록) 내에서 state가 변화된 값을 쓰지 못함 (비동기이기 때문에)
   
   

[리엑트에 있는 엄격 검사모드]

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> // 이것때문에 렌더링 2번돼서, 콘솔에 두번 뜸
    <App />
  </React.StrictMode>
);

react는 component 기반이기 때문에

UI가 분리되어 제작되어 있습니다.

따라서 state 값을 공유해야할 필요가 있는데