State Lifecycle / useEffect

이다은·2022년 10월 4일
0
  • 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다. 이것은 특정 시점에 코드가 실행되도록 설정할 수 있다는 말과 같다.
  • 함수형 컴포넌트에서의 생명주기관련 훅으로는 useEffect가 있다.

Class Component Life Cycle

import Router from "next/router";
import { Component } from "react";

export default class MyComponent extends Component {
  state = {
    count: 0,
  };
	
  componentDidMount() {
    // 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수
    console.log("컴포넌트가 마운트됐습니다~");
  }


  componentDidUpdate() {
    // 컴포넌트 업데이트 작업이 끝나고 리렌더링 후에 호출되는 함수
    console.log("컴포넌트가 변경됐습니다~");
  }

  componentWillUnmount() {
    // 해당 컴포넌트가 제거되기 직전에 호출되는 함수
    alert("컴포넌트가 제거됩니다~");
  }

  onClickButton = () => {
    this.setState((prev: { count: number }) => ({ count: prev.count + 1 }));
  };

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

  render() {
    console.log("마운트 시작");
    return (
      <>
        <div>카운트: {this.state.count}</div>
				<button onClick={this.onClickCounter}>카운트(+1)</button>
        <button onClick={this.onClickMove}>이동하기</button>
      </>
    );
  }
}

** 마운트란?
어떠한 것을 available한 상태로 준비하는 것을 말하는 것으로 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.


Functional Component

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);
  const router = useRouter();

  useEffect(() => {
    console.log("컴포넌트가 마운트됐습니다~");
  }, []);
  // 의존성배열 []에 아무것도 넣지 않으면 마운트시에만 렌더해주고 끝난다(최초 1번만 실행)

  useEffect(() => {
    console.log("컴포넌트가 변경됐습니다~");
  }, [count]);
  // count가 수정될때만 리렌더된다
  
    useEffect(() => {
    console.log("컴포넌트가 변경됐습니다~");
  });
  // 의존성배열 자체가 없으면 어떠한 값이든 변경될 때마다 다시 리렌더된다

  
    useEffect(() => {
    console.log("컴포넌트가 마운트됐습니다~");
    return () => {
      alert("컴포넌트가 제거됩니다~");
      //위의 함수가 반환되면서 아래 함수가 실행되어 페이지를 벗어나게된다
    };
  }, []);
  
  const onClickButton = () => {
    setCount((prev) => prev + 1);
  };

  const onClickMove = () => {
    router.push("/");
  };

  console.log("마운트 시작");
  return (
    <>
      <div>카운트: {count}</div>
      <button onClick={onClickButton}>카운트(+1)</button>
      <button onClick={onClickMove}>이동하기</button>
    </>
  );
}
profile
안녕하세요

0개의 댓글