출처 https://velog.io/@yhko1992/React-Hook-useEffect

useEffect 함수의 사용법

가독성 때문에 메모를 코드블럭으로 해두었으니 참고 해주세요!;)

use... 함수는 리액트 hook함수
   useState 함수 : state변수를 만들고 싶을 때 사용
    let a = 10;
    a = 15; // --> re-rendering? XXX

   	let [a, setA] = useState(10);
   	setA(15); // --> re-rendering OO

useEffect
    useEffect( 함수, 의존성 배열 );
        만일 의존성 배열이 비어있는 배열이라면
        앞에있는 함수는 최초 렌더링 될때만 실행이 된다

        만일 의존성 배열에 변수가 들어있다면
        그 변수가 변할때 마다 앞에있는 함수가 실행이 된다

    useEffect( ()=>{} , [] );

아래 banana함수와 동일
function banana(a, b, c){

}

banana( )

    특정 코드가 특정 상황에서만 실행이 되어야 할때 사용
    특정 상황?
        컴포넌트가 최초로 그려질때 한번만
        컴포넌트가 re-rendering 될때마다 실행
        컴포넌트가 사라질때(unmount) 될때 실행

배열
map 함수
    기존 배열 기반으로 같은 크기의 새로운 배열만들기

filter 함수
    기존 배열 기반으로 조건에 맞는 요소들만 추출하여
    새로운 배열 만들기

배열.filter((e, idx, ar)=>{return true/false});

기존 배열의 요소갯수만큼 반복 하면서
true가 return되는 요소들만 모아 새로운
배열로 만든다

ar = [10, 33, 61, 50, 71, 250];
ar.filter((e)=>{ return e > 50 });

[61, 71, 250]

number = 1;
ar = [1, 2, 3]
let res = ar.filter((e)=>{ return e !== number })
--> [2, 3]

*원본을 훼손하는지 안하는지를 구분하는게 중요!
ar은 여전히 [1, 2, 3] 여야함

---------------------------------------------------
*App.js에 추가

import BoardListFetch from './day09/d01boardList';
import BoardListAxios from './day09/d02boardList';

const router = createBrowserRouter([
  {path:'/fetch-list', element:<BoardListFetch/>},
  {path:'/axios-list', element:<BoardListAxios/>}
]);

d01useEffect.js

import { useEffect, useState } from "react";

const Child = ( props )=>{
    useEffect(()=>{
        console.log(props.UseEffectPage, '번 자식이 만들어짐')
        return ()=>{ console.log(props.componentTitle, '번 자식 삭제!');
        // 부모의 state변수 cnt를 0으로 변경
        // setCnt
        props.setCnt(0);
        // 부모의 state변수 msg를 '기본값' 으로 변경
        // setMsg
        props.setMsg('기본값');
        }
    }, []);

    const onRemoveClick = (number )=>{
        console.log(number);
        // 부모에 만들어져 있는 함수를 자식에게 전달하는 방법? props
        // props.abc([1, 2])
        let res = props.ar.filter((e)=>{return e !== number});
        props.abc(res);
    }

    // const wrapFunc = (aaa)=>{
    //     onRemoveClick(props.componentTitle);
    // }
    return(
    <>
    <h1>{props.componentTitle}번 자식 컴포넌트입니다</h1>
    <button onClick={()=>onRemoveClick(props.componentTitle)}>삭제!</button>
    <button onClick={onRemoveClick}>삭제!</button>
    </>
    )
}


// 최초로 그려질때 : rendering이 된다
const UseEffectPage = ()=>{
    const [cnt , setCnt] = useState(0);
    const[msg , setMsg] = useState('기본값');

    // 해당 컴포넌트가 rendering 될때마다 실행이 된다
    console.log('안녕하세요');

    useEffect(()=>{
        console.log('의존성 배열이 없다면?')
    })

    useEffect(()=>{
        console.log('UseEffectPage가 최초 렌더링 될때만 실행');
    }, []);

    useEffect(()=>{
        console.log('cnt가 바뀌어서 다시 그려질때마다');
        return ()=>{console.log('cnt unmount')}
    }, [cnt]);

    useEffect(()=>{
        console.log('msg가 바뀔때마다 실행');
    }, [msg]);
    
    useEffect(()=>{
        console.log('cnt 혹은 msg 둘중 하나만 바뀔때마다 실행');
    }, [cnt, msg]);

    useEffect(()=>{
        return ()=>{
            console.log('unmount될때 실행(기존컴포넌트가 사라질때)')
        }
    }, []);

    const [ar, setAr] = useState([1, 2, 3]);

    return(
        <>
            {/* Child라는 component를 만들고 componentTitle이라는 props를 만들었다 */}
            {/* <Child abc={setAr} componentTitle={1}/> 
            <Child abc={setAr} componentTitle={2}/>
            <Child abc={setAr} componentTitle={3}/> */}
            {ar.map((e)=> <Child key={e} ar={ar} setCnt={setCnt} setMsg={setMsg} setAr={setAr} omponentTitle={e} />)}
            <h1>UseEffectPage</h1>
            <h1>{cnt}</h1>
            <button onClick={()=> setCnt(cnt-1) }>-</button>
            <button onClick={()=> setCnt(cnt+1) }>+</button>
            <p>{msg}</p>
            <input onChange={(e)=>setMsg(e.target.value)} />
        </>
    )
}

export default UseEffectPage;