React_기초다지기_하루정리(React Lifecycle 제어하기)

React

---

⚑목표 : 리스트 배열 사용하기!

• 배열을 이용한React의 List에 아이템을 동적으로 추가해보자!

---

[Lifecycle 이란?]

일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정

[React 컴퍼넌트에서의 생애 주기]

탄생->변화->죽음

[탄생 : Mount]

컴퍼넌트 Mount란 : 화면에 나타나는 것
ex) 초기화 작업
: 컴포턴트가 화면에 가장 처음 랜더링 될 때!

[변화 : Update]

컴퍼넌트 Update : state가 바뀌거나 부모가 리랜더 되거나, Prop이 바뀌어 자신이 리랜더 되는 과정 등,,
ex) 예외 처리 작업
: 특정값이 업데이트 될 떄 실행하고 싶을 때 /즉, 특정값이 함수를 실행하고 싶을때

[죽음 : UnMount]

컴퍼넌트 UnMount : 화면에서 사라짐
ex) 메모리 정리 작업

[Mount와 Update]

//Mount!
 useEffect(() =>{
        console.log("Mount!");
    },[]);

    useEffect(() =>{
        console.log("Update!");
    });

// Update!
    useEffect(() =>{
    },[count]);

    useEffect(() =>{
        if(count>5){
            alert("count가 5를 넘었습니다. 따라서 1로초기화합니다");
            setcount(1);
        }
    },[count]);

1. mount와 같은 경우는 의존성 배열이 [] 공백으로 주게 되면 컴퍼넌트가 mount될시기에만 반환됨
   이후 더 이상 랜더링 되지않음
2. Update 같은 경우 두번째 파라미터, 의존성 배열이 새롭게 상태가 변화되면 그 시기에 랜더링 된다.
   위에와 같이 count상태가 바뀌게 되면 그때 랜더링이 되는 것!

[Unmount]

const UnmountTest = ()=>{
    useEffect(()=>{
        console.log("Mount");

        return ()=>{
            //Unmount 시점에 실행될
            console.log("Unmount!");
        }
    },
    []);
    return <div>Unmount Testing component</div>
};


const Lifecycle = () => {
  const [isvisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isvisible);

  return (
    <div style={{ padding: 20 }}>
      <button onClic={toggle}>on/off</button>
      {isvisible && <UnmountTest />}
    </div>
  );
};

export default Lifecycle;

//Mount의 경우 컴퍼넌트가 처음 마운트될때만 실행됨, 즉, 컴퍼넌트가 지속해서 랜더링 되더라도 실행 x
//즉 컴퍼넌트가 마운트될때만 작동하고 싶다면 , 빈배열을 전달하면된다.

//컴퍼넌트가 업데이트 될 때 어떤함 콜백함수를 사용하고싶다면, 파라미터를 아무것도 넣어주지 않으면됨

• Unmount와 같은 경우는 콜백 함수가 retrun할 때 랜더링 된다.

각각의 useEffect의 업데이트 과정을 익혀놓자