State Lifecycle /useEffect

컴포넌트 라이프사이클(생명주기)

  onClickCounter = () => {
    this.setState((prev: IState) => ({ count: prev.count + 1 }));
  };

  componentDidMount() {
    console.log("마운트됨!!");
    this.inputRef.current?.focus();
    // 포커스 깜빡깜빡
  }

  componentDidUpdate() {
    console.log("수정되고 다시그려짐");
  }

  componentWillUnmount() {
    console.log("컴포넌트 사라짐");
    // 채팅방 나가기
    // api 요청 !! 그러면 나가기 버튼을 안누르고 나갔을때에도 에이피아이가 요청된다~~!
  }

클래스형 컴포넌트의 경우엔 위와같이 사용됨!

componentDidMount/componentDidUpdate/componentWillUnmount
를 함수형에서는 useEffect 하나로 작성하게되는게 표현방식이 각각 다르다!
어떻게 다르나???

 useEffect(() => {
   console.log("마운트됨!");
   inputRef.current?.focus();
 }, []);//=== componentDidMount 


 useEffect(()=>{
   setCount(prev=>prev+1);
 },[count]) //=== componentDidUpdate 카운트가 바뀔떄마다 실행됨

 useEffect(() => {
   return () => {
     console.log("컴포넌트 사라짐");
   };
 }, []) //=== componentWillUnmount

// []<- 의존성 배열 (Dependency Array) 비어있으면 한번만 실행되고 그안에[count]이렇게 들어가면 카운트가 바귈때마다 실행된다!! 이점이 업데이트마운트와 다른것임


 console.log("나는언제실행되게??!");
 // -->맨밑에있는데도 맨먼저 실행된다. 왜냐!! 컴포넌트가 다 만들어지고 알리는거가 디드마운트!!

useEffect의 잘못된 사용 예
(1)setState 와 함께 사용하게되면 불필요한 랜더링이 일어난다. 권장하지 않음!
(2)의존성배열과 스테이트함께사용하면 무한루프 빠질수있드아아