클래스형 컴포넌트와 함수형 컴포넌트의 state lifecycle 기능

Lifecycle 은 클래서형에서는 compent의 메서드로, 함수형에서는 useEffect로 사용할 수 있다.

 

1. 그리기
2. 그리고 난 뒤 실행
3. 그리도 난 뒤 변경됐을 때
4. 그리고 난 뒤 사라질때

 

위의 예시처럼 a 실행시키고 바로 다음 동작을 명령시킬때 해당 동작만을 실행시킨다. 

 

이것은 코드 작성을 간편하게 하는 것도 있지만, 다음 동작을 위해 전체 코드를 리렌더링하지 않고,

원하는 부분만 인식시켜 컴퓨터를 더 효율적으로 동작시키는 장점도 있다.

 

시작하기 전에 useEffect는 전체코드를 실행한 뒤 동작되는 메서드 인 점을 기억하자

 

class형 lifecycle

 

  componentDidMount(): void {
    // Component 의 기능
    console.log("그려지고 나서 실행!!");
  }

  componentDidUpdate(): void {
    // Component 의 기능
    console.log("변경되고 나서 실행!!");
  }

  componentWillUnmount(): void {
    // Component 의 기능
    console.log("사라지기전에 실행");
    // 예시) 채팅방 나가기 API, 나가기전에 마지막으로 할 것들
  }

 

componentDidMount : 함수가 모두 그려지면 바로 실행된다. (최초 1회)

componentDidUpdate : 함수가 변경될 때마다 무한대로 실행된다.

componentWillUnmount : 해당 함수를 벗어나기 전에 1번 실행 ex) 채팅방 나가기 등

 

전체 함수에 적용하거나 함수안에 적용시켜서 사용이 가능할 것 같다.

  onClickCountUp = (): void => {
    // console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

  onClickMove = (): void => {
    void Router.push("/");
  };

  render(): JSX.Element {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.onClickCountUp}>카운트 올리기!!</button>
        <button onClick={this.onClickMove}>나가기!!</button>
      </>
    );
  }

 

함수형 lifecycle

 

함수형은 Hooks 를 활용한 useEffect를 사용할 수 있다.

 

// 기본 모양

useEffect( () => { 
	실행시킬 함수 작성 
    },[ 반복 횟수 작성 ]);

 

" 반복 횟수 작성 " 공간에 아무것도 작성하지 않으면 의존성 배열로 초기에 한번만 실행되고 실행되지 않습니다.

" 반복 횟수 작성 " 공간 자체가 없을 경우 무엇이 바뀌던 바뀔때마다 무한적으로 다시 실행 시킵니다.

 

이때 componentDidUpdate와 다른점은, 처음 Mount 됐을 때도 한번 실행된다는 점입니다.

 

// useEffect 활용

useEffetc( () => {
	console.log("그려지고 나서 실행!!")
    
    return () => {
    console.log("사라지기전에 실행!!");
    };
});

이렇게 "실행시킬 함수 작성" 공간에 return 을 추가하게 되면, 마치 class형의 componentWillUnmount  와 비슷하게 동작합니다.

 

 

useEffect의 잘못된 사용 방법 

useEffect는 코드 순서와 상관없이 함수를 모두 그린 후 실행되는 특징을 가지고있습니다.

그럼 만약에 useEffect안에서 set을 사용하여 변수의 값을 변경시키면 어떻게 될까?

 

  useEffect(() => {
    setCount((prev) => prev + 1);
  }, [count]);

위 함수처럼 count 값이 변경될때마다 useEffect를 반복하고, useEffect는 계속해서 count + 1을 실행하므로 무한 루프에 빠지게 된다.